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

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

我究竟做错了什么 ？

标签： angularangular-components

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