angular - 角度选择更改刷新组件

Question

我有一个 Angular 7 组件，它在 . 然后根据所选值创建一个嵌套组件（日历）。我只希望更改事件没有选择刷新嵌套组件。加载时很好。

我是新手，我应该在我的角度课程中错过一些东西，但我不明白是什么。

这是我的代码：

    <select class="sites" [(ngModel)]="selectedSite" (ngModelChange)="onChangeSite($event)">
        <option *ngFor='let site of data.sites' [ngValue]='site.id'>{{ site.name }}</option>
    </select>

<app-weeklycalendar [calendar]='selectedSite'></app-weeklycalendar>

我想我应该在 app-weeklycalendar 中添加一些内容，但我不知道是什么

.ts

export class SiteCalendarComponent implements OnInit {
    ready: Promise<boolean>;
    private data = {};
    private selectedSite = 1;
    private calendar = {};

  constructor(private App:AppService, private Route: ActivatedRoute) { }

  ngOnInit() {
    this.App.get("sites/activesites").subscribe(
      result => {
        this.data = result;
        this.ready = Promise.resolve(true);
    })
  }

  onChangeSite(siteId) {
    this.selectedSite = siteId;
    console.log(this.selectedSite);
  }
}

感谢您的回复。如果您可以添加解释，这将对我有所帮助。

标签： angular

Answer 1

@Input() 属性更改检测的一种方法可能是：

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'app-weekly-calendar',
    template: `Your code`
})

export class WeeklycalendarComponent implements OnInit {

    private _calendar: number;

    @Input() set calendar(value: number) {
        this._calendar = value;
        // Refresh the calendar when a value changes        
    };

    get calendar(): number {
        return this._calendar;
    }

    constructor() { }

    ngOnInit() { }
}

有用的资源：

• 输入属性变化检测