Angular 2.0 中的路由基础知识

Question

这是一个非常基本的场景，但是，作为Angular 2.0的初学者，我很难弄清楚如何实现相同的目标。

在Routing Implementation之前，我会有这样一行app.component.html

<app-home [selectedNinja] = "ninja" (onYell) = "yell($event)">Hello There</app-home>

在应用程序中，我喜欢

export class AppComponent {
ninja = {
name : 'Yoshi',
belt: 'Black'
}
......
......

因此，这是一个@Input参数，在我们的home.component.ts文件中将被接受。

现在在路由实现之后，我只能有：

<!--<app-home [selectedNinja] = "ninja" (onYell) = "yell($event)">Hello There</app-home>-->
<nav>
<a routerLink="/" routerLinkActive="active">Home</a>
<a routerLink="/directory" routerLinkActive="active">Directory</a>
</nav>
<router-outlet></router-outlet>

所以我想在要求默认路由时加载主组件。

但是我现在不知道如何像以前一样传递输入数据和事件？

我们没有像<app-home>这样的声明吗？

还是我错过了非常基本的东西？

Answer 1

您的主组件并不是真正的主组件。这是一个忍者组件：它以忍者为输入，并在忍者大喊大叫时发出事件。此类组件不是路由组件的良好候选项。

因此，如果您希望主页显示硬编码的忍者，请创建一个定义此忍者的路由组件，并将其作为输入传递给您的忍者组件。就像您的应用程序组件当前所做的那样。

第一步：将主组件重命名为 ninja。

第二步：定义一个真正的家庭组件：

@Component({
template: '<app-ninja [selectedNinja] = "ninja" (onYell) = "yell($event)">Hello There</app-ninja>'
})
export class HomeComponent {
ninja = {
name : 'Yoshi',
belt: 'Black'
}
yell(event) {
// ...
}
}