Question

应用组件

@Component({
    selector: 'app',
    template: '<div class="heading">{{heading}}</div>'
})
@Routes([
    {path: '/comp1', component: Comp1Component},
    {path: '/comp2', component: Comp2Component}
])
export class AppComponent {
    heading: string = 'App Component';
}

Comp1Component

@Component({
    selector: 'comp1'
})
export class Comp1Component {
    // how to change heading property of app component from here
    // Want to change heading property of AppComponent to "Component 1"
}

Comp2Component

@Component({
    selector: 'comp2'
})
export class Comp2Component {
    // how to change heading property of app component from here
    // Want to change heading property of AppComponent to "Component 2"
}

我想根据所选路线更新AppComponent的标题属性吗？

任何人都可以建议我使用Angular2 RC 1吗？以及如何实现这一目标？

Answer 1

您可以安全地使用服务：

<强> DataService.ts

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

@Injectable()
export class DataService {
    ...
    heading: string;
    ...
    setHeading(newValue) {
        this.heading = newValue; //you can also do validation or other things here
    }
    getHeading() {
        return this.heading;
    }
    ...
}

<强> AppComponent.ts

import {DataService} from './DataService';

@Component({
    selector: 'app',
    providers: [DataService],
    template: '<div class="heading">{{heading}}</div>'
})
@Routes([
    {path: '/comp1', component: Comp1Component},
    {path: '/comp2', component: Comp2Component}
])
export class AppComponent {
    constructor(private dataService: DataService) { }

    heading: string = this.dataService.getHeading();
}

<强> Comp1Component

import {DataService} from './DataService';

@Component({
    selector: 'comp1',
    providers: [DataService]
})
export class Comp1Component {
    // how to change heading property of app component from here
    // Want to change heading property of AppComponent to "Component 1"
    constructor(dataService: DataService) { 
        dataService.setHeading('Component 1');
    }
}

<强> Comp2Component

import {DataService} from './DataService';

@Component({
    selector: 'comp2',
    providers: [DataService]
})
export class Comp2Component {
    // how to change heading property of app component from here
    // Want to change heading property of AppComponent to "Component 2"
    constructor(dataService: DataService) { 
        dataService.setHeading('Component 2');
    }
}

您可以在任何地方更改heading，请记住，如果您需要在组件构造函数之外执行此操作，则DataService的注入实例需要定义为private或者被分配给一个类属性。

Answer 2

上面提到的方法对我不起作用，但我使用服务中的模型和绑定模型属性到父组件元素。

这就像一个魅力。：）

<强> SharedService.ts

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

@Injectable()
export class SharedService {

    data: any;          // you can create your own class but here just to understand data

    setHeading(newValue) {
        this.data.heading = newValue;
    }
}

<强> AppComponent.ts

import {SharedService} from './SharedService';

@Component({
    selector: 'app',
    providers: [SharedService],
    template: `
        <div class="heading">{{sharedData.heading}}</div>
        <router-outlet></router-outlet>
    `
})
@Routes([
    {path: '/comp1', component: Comp1Component},
    {path: '/comp2', component: Comp2Component}
])
export class AppComponent {

    constructor(private sharedService: SharedService) { }

    sharedData = this.sharedService.data;
}

<强> Comp1Component.ts

import {SharedService} from './SharedService';

@Component({
    selector: 'comp1'       // you dont need to set providers for service, it will consume one from parent component
})
export class Comp1Component {
    constructor(sharedService: SharedService) { 
        sharedService.setHeading('Component 1');
    }
}

<强> Comp2Component.ts

import {SharedService} from './SharedService';

@Component({
    selector: 'comp2'      // you dont need to set providers for service, it will consume one from parent component
})
export class Comp2Component {
    constructor(sharedService: SharedService) { 
        sharedService.setHeading('Component 2');
    }
}

Angular 2 RC1 - 从子路径组件属性更新父组件属性

2 个答案: