Question

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

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

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

在 app.component.ts 中我喜欢

export class AppComponent {

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

因此，我们的 home.component.ts 文件中会接受@Input参数。

现在路由实施后，我只能：

  <!--<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

您的家庭组件并非真正的家庭组件。它是一个忍者组成部分：当忍者大喊大叫时，它需要一个忍者作为输入并发出事件。这样的组件不是路由组件的良好候选者。

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

第一步：将您的家庭组件重命名为忍者。

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

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

  ninja = {
    name : 'Yoshi',
    belt: 'Black'
  }

  yell(event) {
    // ...
  }
}

Angular 2.0中的路由基础知识

1 个答案: