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

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 class）和 <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">

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

Inherited component fails to update property in base component

angular-components

angular

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

Inherited component fails to update property in base component

angular-components

angular

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