Question

我是angular2的新手，随时帮我调整词汇量/术语

我有一个由两个指令组成的类：

parent.component.ts中的

Parent由Foo和Bar

组成

@Component({
  selector: 'parent',
  directives: [Foo, Bar]
  ...
  template: require('./parent.html')
})
export class Parent {
  ...
}

<{1>}中的

，我们定义Foo.component.ts

Foo

<{1>}中的

，我们定义@Component({ selector: 'foo', directives: [], ... }) export class Foo { ... browse() { this.router.navigate(['/pages/somewhere', []]); } }

Bar.component.ts

在Bar和@Component({ selector: 'bar', directives: [], ... }) export class Bar { ... browse() { this.router.navigate(['/pages/somewhere', []]); } }的html模板中，我想使用执行相同操作的点击事件（Foo）。我让它像上面一样工作，但Bar和browse()的定义中有重复的代码，可以在Foo

中定义一次

这种继承看起来怎么样？

Answer 1

您可以使用某项服务，但除非您在各地的组件中使用它，否则将其保留在组件中似乎更好。使用Output()对子组件执行此操作的规范方法。在子组件中，您将(click)绑定到browse()函数。

@Component({
   selector: 'bar',
   directives: [],
    ...
})
export class Bar {
    @Output() browse: EventEmitter<Node> = new EventEmitter<Node>();

    ...
    browse() {
       this.browse.emit(/*some data could be passed here*/)
    }
  }

在父模板中：

<bar (browse)="goSomewhere($event)" neolabel="Company"></bar>

和组件：

@Component({
   selector: 'parent',
   directives: [Foo, Bar]
   ...
   template: require('./parent.html')
 })
export class Parent {
   goSomewhere(event){this.router.navigate(['/pages/somewhere', []]);}
...
}

这将在父级中保留单个函数，但将其与接口的逻辑保持在一起。

如何从angular2中的父组件继承函数

1 个答案: