在 Angular 中輸入更改時更新組件

Question

     <div class=" card-body">
        <div class="row">
          <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6" routerLinkActive="active"
            *ngFor="let subject of subjects">
            <div class=" font-icon-detail">
              <div (click)="setSubject(subject.title)" >
                <i class="deep-icons  {{ subject.icon }}"></i>
                <p>{{ subject.title }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
     <subject-component [setSubjectService]="selectedSubject"></subject-component> 

上面的代碼來自我的 selector.component.html。

export class SubjectComponent implements OnInit {


@Input() public set setSubjectService(_subjectService: ISubjectService) {
    this.subjectService = _subjectService;
  }

  public subjectService: ISubjectService;

  constructor() {}

  public ngOnInit(): void {

  }
}

上面的代碼來自我的 subject.component.ts

現在，主題組件在應用程序啟動時呈現一次，但每當“selectedSubject”更改時，它都不會更新或重新呈現。 我怎樣才能做到這一點？

（使用 Angular 8）

Answer 1

我想你想使用雙向綁定。 如果是這樣的話; 使用事件發射器創建輸出，例如；

@Input() myVariable: number;
@Output() myVariableChange = new EventEmitter(); //define it nameofyourvariable+Change

constructor() { }

ngOnInit() {}

changeMyVar(v: number) {
   this.myVariable=v;
   this.myVariableChange.emit(myVariable);
}

並使用帶括號的兩種方式綁定。 我的意思是如下：

<subject-component [(setSubjectService)]="selectedSubject"></subject-component>