Question

我有一个父组件主页和一个子组件 Hall 。从 Home 我选择一个城市，并根据选定的城市，我试图加载所有的大厅＆＃39;来自我的 Hall 组件。

首页HTML：

<div class="dropdown">
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Select your city</button>
        <div class="dropdown-content">
            <ul *ngFor = "let city of cities">
                <a (click)="selectCity(city)" > {{city.name}} </a>
            </ul>
        </div>
        <hall *ngIf = "isSelectHall" [city]="specific_city" ></hall>
</div>

主页组件：

constructor(private homeService: HomeService) {
}

ngOnInit() {
    this.homeService.getCities().then (
        data => {
            this.cities = data;
        });     


}

selectCity(city:any) {
    this.specific_city = city;
    this.isSelectHall = true;
}

霍尔组件：

export class Hall implements OnInit{
    @Input() city: any;

    halls: Object;
    openDiv : boolean;
    specific_hall: Object;
    cart : any;
    cartCount: number;
    cartHalls: any;
    countHall: number;

    constructor(private hallService: HallService){

        this.cart=[]; 
    }

    ngOnInit(){
        this.fetchData(this.city.id)
    }

    fetchData(cityId : any) {

        this.hallService.fetchData(cityId)
        .then( 
            data => {
                this.halls = data;
            });
    }

    clicked(item : any) {

        this.specific_hall = item
    }

    onNotify(cartItems : any) : void {

        this.cartHalls = cartItems;
        this.cartCount = this.cartHalls.length;
    }
}

Hall HTML：

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col">
        <div class="populate-table" [hidden]="!halls">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Landmarks</th>
                    <th>Seating capacity</th>
                    <th>Details</th>
                </tr>
                <tr *ngFor="let item of halls">
                    <td> {{ item.name }} </td>
                    <td> {{ item.landmarks }} </td>
                    <td> {{ item.seating_capacity }} </td>
                    <td> <a (click)="clicked(item)"> See </a> </td>
                </tr>
            </table>
        </div>
    </div>

我面临的问题是：首次点击 Home 中的selectCity(city)，它会加载特定于所选城市的所有大厅，但是当我点击任何城市时它没有任何效果之后的其他城市。我在这里做错了什么？

Scrrenshot ：

Answer 1

你需要设置一个触发器来重新运行子进程中的fetchData方法;类似onChanges或与子组件通信（见下文）。每次组件属性发生更改时，ngInit将运行一次但不会再次运行。以下是使用get / set方式进行父/子通信的代码示例。

家长/子组件互动：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child

    private this._city: Object;

    @Input ()

    set city(city: Object) {
    this._city = city;
    this.fetchData(this.city.id); 
//whenever city changes via Input, halls is updated which will cause *ngFor to re-render)
    }

    get city() {
    return this._city;
    }

Answer 2

像https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter中所述，在输入中添加一个setter，并从中触发对fetchData的调用。应该看起来像这样（未经测试）：

export class Hall implements OnInit{
    private _city: any = {};

    @Input() 
    set city(city: any) {
        this._city = city;
        this.fetchData(this.city.id);
    }

angular2子组件不会在从父组件触发的后续事件上加载

2 个答案: