Question

我现在使用angular4几个月了，而且我想弄明白，我怎样才能在组件之间建立继承。

所以在我的例子中我有两个组件 ParentComponent 和 ChildComponent

ParentComponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public makeSomeMath(a: number, b: number) {
    return a + b;
  }

}

ParentComponent.html

<p>I'm parent component</p>

ChildComponent.ts

import { Component, OnInit } from '@angular/core';
import { ParentComponent } from '../parent/parent.component';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent extends ParentComponent implements OnInit {

  public data: number;

  constructor() {
    super();
   }

  ngOnInit() {
    this.data = this.makeSomeMath(5, 6);
  }

}

ChildComponent.html

I'm child component and my result is : {{data}}

在这里工作，我在孩子中使用ParentComponent函数并在我的模板中显示结果。

I'm child component and my result is : 11

我可以在childComponent.ts中覆盖此行为：

public makeSomeMath(a: number, b: number) {
    return a - b;
}

我在子组件上的结果将是（与前一个参数相同）：

I'm child component and my result is : -1

因此，组件行为的继承可以正常工作，但如果在我的子组件中我想使用父视图呢？

我可以更改子组件的 templateUrl 以使用父组件。但首先，我不知道它是否是最佳实践（我会说不）。第二，如果我的模板有（例如）300行Html，并且我想仅为我的子组件修改几行，我将不得不在父模板中更改它而我不会那样做。

所以我的问题是：我如何设置我的模板/组件，以便能够做到这三件事：

使用父视图而不进行修改。
使用父视图进行一些修改。
覆盖整个视图。

像ng-content这样的东西就可以了（除非有更好的东西），如果我可以使用它继承，比如在父母中使用＆＃34;默认视图＆＃34;定义一些部分。但是如果我在具有良好ID的孩子中使用ng-container，它将使用它来替换父视图的默认内容。

如果您对我有任何暗示，我将不胜感激，谢谢

角度组件视图继承

0 个答案: