Question

尝试使用ngx，注意到这样的特性：当尝试从另一个组件调用组件的方法时，它会更新模型但不更新被调用组件的视图。

下一种情况是：root.component的html中有test.component。应该通过从任何其他组件调用该组件的方法来更改test.component的视图。

app.component.html
<router-outlet></router-outlet>
<test-comp></test-comp>

Test.component.ts

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


@Component({
  selector: 'test-comp',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class TestComponent {
  public isVisible: boolean = false;

  public setVisibility(isVisible: boolean) {
    this.isVisible = isVisible;
  }
}

Test.component.html

<div>
  <p>Test component is visible: {{isVisible}}</p>
</div>
<div *ngIf="isVisible">
  <p>Hi, this is test component!</p>
</div>

在一些其他组件中调用相应的test.component方法：

export class LoginComponent implements OnInit {
  constructor (private testComponent: TestComponent) {}
  .....................................................
  this.testComponent.setVisibility(true);

}

在调试器中，我可以看到模型已更改（this.isVisible = isVisible;），但模型未更新。

所以，我知道从另一个组件调用组件方法是一种非常糟糕的方法，但我对细节很感兴趣：为什么这种情况下的视图没有更新？
有没有办法更新该情况的视图？

谢谢你们，伙计们！

Answer 1

尝试使用 ViewChild（），在父组件中的构造函数之前声明它：

@ViewChild(TestComponent) testComponent: TestComponent;

从父组件调用子组件：

this.testComponent.setVisibility(true);

希望这会有所帮助：）

角。从另一个组件更新模型调用组件的方法，但不更新被调用组件

1 个答案: