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

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}} 显示在基本组件模板中，但尽管值本身正确递增，但它从不刷新。

我已经在 stackblitz 中重现了这个问题：

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