Question

我有一个Angular 4组件，它充当从服务器提取页面数据的基本组件。该组件可以设置使用它的所有页面组件共有的某些值。

我有一个页面组件，它需要从数据中提取一个非常特定的节点（在示例“leadText”中）。在不使基本组件查找此值的情况下，最简单的方法是什么？

以下是示例代码。

@Component({
    selector: 'app-base-page',
    templateUrl: './base-page.component.html'
})
export class BasePageComponent implements OnInit {

    page: string;
    data: any[] = [];
    errorMessage: string;
    header: string;

    constructor(
        public getPageService: GetPageService
    ) {}

    ngOnInit() {
        this.getPage();
    }

    /* Handle the getPageService observable */
    getPage() {
        this.getPageService.getPage(this.page)
            .subscribe(
                (data: any) => {
                    this.data = data;
                    this.header = data.header;
                },
                error => this.errorMessage = <any>error
            );

    }

}

@Component({
    selector: 'app-about',
    template: '<div [innerHTML]="leadText"></div>'
})
export class AboutPageComponent extends BasePageComponent {
    page: string = 'about';
    leadText: string;
    // how to get string data.leadText from parent component?
}

任何帮助都非常感激。

Answer 1

单向： 如果您在AboutPageComponent中使用base-page.component.html，请执行以下操作：

<h1>Base Page Component</h1>
<app-about></app-about>

您可以使用leadText作为组件的输入参数，如下所示：

@Component({
    selector: 'app-about',
    template: '<div [innerHTML]="leadText"></div>'
})
export class AboutPageComponent extends BasePageComponent {
    page: string = 'about';

    @Input() leadText: string;
}

和您的base-page.component.html：

<h1>Base Page Component</h1>
<app-about [leadText]="data.leadText"></app-about>

第二种方式： 您可以使用服务来缓存相应的数据。

@Injectable()
export service CacheService {

    leadText: string;

    constructor(){}

    setLeadText(leadText: string) {this.leadText = leadText;}
    getLeadText(){return this.leadText;}
}

您可以在订阅中拨打setter：

.subscribe(
    (data: any) => {
         this.data = data;
         this.header = data.header;
         this.cacheService.setLeadText(data.leadText); //Service call to set the leadText value
        },
         error => this.errorMessage = <any>error
    )

您还可以在服务方法中移动您的请求，您可以在其中设置相应的leadText值。

在你的AboutPageComponent中，你会做这样的事情：

export class AboutPageComponent extends BasePageComponent {
    page: string = 'about';
    leadText: string;

    constructor(private cacheService: CacheService){}

    ngOnInit(){
        this.leadText = this.cacheService.getLeadText();
    }
}

Answer 2

您可以在此处使用您的派生组件可以订阅的主题：

import { Subject } from 'rxjs';
...
data$ = new Subject();
...
getPage() {
    this.getPageService.getPage(this.page)
        .subscribe(
            (data: any) => {
                this.data$.next(data); // pass value in here
                this.header = data.header;
            },
            error => this.errorMessage = <any>error
        );

}

派生组件

@Component({
    selector: 'app-about',
    template: '<div [innerHTML]="leadText | async"></div>'
})
export class AboutPageComponent extends BasePageComponent {
    page: string = 'about';
    // note that your data is now an observable and must be treated asynchronously
    leadText = this.data$.map((data: any) => data.leadText)
}

Angular：获取子组件中的服务数据

2 个答案: