继承的组件无法更新基本组件中的属性

Question

我有一个Angular组件继承了一个基本组件。

@Component({
selector: "my-baseclass-component",
template: `
<div style="border:1px solid red;padding:10px">
counter value (check console to see it gets incremented) : {{ counter }}
<ng-content select="[body]"></ng-content>
<br />
</div>
`
})
export class BaseClassComponent {
public counter = 0;
constructor() {}
}

我只想在单击按钮时，从继承的组件中增加基本组件中的计数器。

@Component({
selector: 'my-inherited-component',
template: `<my-baseclass-component #myBaseclass>
<div style="border:1px solid black" body>Inherited Component Content
<button (click)="click()">toggle</button>
</div>
</my-baseclass-component>`
})
export class InheritedComponent extends BaseClassComponent {  
click(){
this.counter++;
console.log('clicked:' + this.counter);
}
}

计数器变量使用花括号符号{{counter}}显示在基本组件模板中，但它从未刷新，尽管值本身已正确递增。

我已经在堆叠中复制了这个问题：

https://stackblitz.com/edit/angular-ivy-sssxvt?file=src/app/baseclass.component.ts

我做错了什么？

Answer 1

当您将<app-some-comp></app-some-comp>放入模板中时，您会告诉Angular实例化一个新的AppSomeComponent的隔离实例。

在您的示例中

@Component({
...
template: `
<my-baseclass-component #myBaseclass>
....
</my-baseclass-component>`
})
export class InheritedComponent extends BaseClassComponent {}

您创建了InheritedComponent组件(它派生自BaseClassComponent类)和<my-baseclass-component的一个新的分离实例。

如果您希望counter反映在内部<my-baseclass-component组件中，则应该更新它本身。

有几个选项：

• 手动更新https://stackblitz.com/edit/angular-ivy-gr3ws3?file=src%2Fapp%2Finherited.component.ts:

  (click)="click(); myBaseclass.counter = counter"
  

• 使用属性绑定https://stackblitz.com/edit/angular-ivy-fhj7n7?file=src%2Fapp%2Finherited.component.ts

  export class BaseClassComponent {
  @Input() counter = 0;
  
  <my-baseclass-component [counter]="counter">