Angular2组件间通信_Angular - Fatal编程技术网

Angular2组件间通信

angular

Angular2组件间通信,angular,Angular,我的问题正是标题所暗示的。我将首先解释我必须做什么所以我有一个组件小部件。当我点击它时，会弹出一个包含两个项目的模式。每个项目代表主应用程序中的不同部分。单击任何项目时，将显示与该项目（即组件本身）相关的特定部分我没有使用Angular 1或Angular 2的预览经验，所以说实话，我不知道从哪里开始，也不知道应该搜索什么。我提出的最好的方法是EventEmitter，输出，输入（但从我所读到的内容来看，这些都是用于孩子-家长/家长-孩子之间的交流，但事实并非如此）。另外，我一直在寻找可观

我的问题正是标题所暗示的。我将首先解释我必须做什么

所以我有一个组件小部件。当我点击它时，会弹出一个包含两个项目的模式。每个项目代表主应用程序中的不同部分。单击任何项目时，将显示与该项目（即组件本身）相关的特定部分

我没有使用Angular 1或Angular 2的预览经验，所以说实话，我不知道从哪里开始，也不知道应该搜索什么。我提出的最好的方法是

EventEmitter

，

输出

，

输入

（但从我所读到的内容来看，这些都是用于孩子-家长/家长-孩子之间的交流，但事实并非如此）。另外，我一直在寻找

可观察的

，但我认为这在这种情况下没有帮助（据我所知，我处理的是服务器端服务调用）。如果你有任何经验，请分享。

谢谢。

我会使用单例来保存状态，并将其注入到需要读取状态/更改状态的任何地方

下面的代码演示了兄弟组件、父组件和子组件之间在angular services的帮助下的通信

应用程序模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './app.parent.component';
import { ChildComponent } from './child.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ ParentComponent, ChildComponent ],
    bootstrap: [ ParentComponent ]
})
export class AppModule {}

import { Component } from '@angular/core';
import { ParentChildService } from './parent-child.service';

@Component({
    selector: 'parent-app',
    template: `
        <div>
            <div>
                <h1>Hello from Parent</h1>
            </div>
            <div style="border: 1px dotted blue;">
                <p> <b> Child message history </b> </p>
                <p *ngFor="let message of childMessages">
                    {{ message }}
                </p>
            </div>
            <child-app [id] = 1> </child-app>
            <child-app [id] = 2> </child-app>
        </div>
    `,
    providers: [ ParentChildService ]
})
export class ParentComponent {
    childMessages: string[] = [];

    constructor(private parentChildService: ParentChildService) {
        parentChildService.attentionRequested$.subscribe((request) => {
            this.childMessages.push(this.parentChildService.requestedBy + ": " + request);
        });
    }
}

import { Component, OnDestroy, Input } from '@angular/core';
import { ParentChildService } from './parent-child.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'child-app',
    template: `
        <div>
            <div>
                <h2>Hello from {{ id }} child component</h2>
                <span> Message: </span> <input type="text" [(ngModel)]="message">
                <button (click) = "requestAttention();"> Request </button>
            </div>
            <div style="border: 1px dotted green;">
                <p> <b> Sibling message history </b> </p>
                <p *ngFor="let message of siblingMessages">
                    {{ message }}
                </p>
            </div>
        </div>
    `
})
export class ChildComponent implements OnDestroy {
    message: string;
    subscription: Subscription;
    siblingMessages: string[] = [];
    @Input() id: number;

    requestAttention(): void {
        this.parentChildService.requestAttention(this.message, this.id);
    }

    constructor(private parentChildService: ParentChildService) {
        this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => {
            if (this.id != this.parentChildService.requestedBy) {
                this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request);
            }
        });
    }

    ngOnDestroy(): void {
        // prevent memory leak when component destroyed
        this.subscription.unsubscribe();
    }
}

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

@Injectable()
export class ParentChildService {
    // Observable sources
    private requestAttentionSource = new Subject<string>();

    // Observable streams
    attentionRequested$ = this.requestAttentionSource.asObservable();
    requestedBy: number;

    requestAttention(request: string, id: number) {
        this.requestedBy = id;
        this.requestAttentionSource.next(request);
    }
}

app.parent.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './app.parent.component';
import { ChildComponent } from './child.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ ParentComponent, ChildComponent ],
    bootstrap: [ ParentComponent ]
})
export class AppModule {}

import { Component } from '@angular/core';
import { ParentChildService } from './parent-child.service';

@Component({
    selector: 'parent-app',
    template: `
        <div>
            <div>
                <h1>Hello from Parent</h1>
            </div>
            <div style="border: 1px dotted blue;">
                <p> <b> Child message history </b> </p>
                <p *ngFor="let message of childMessages">
                    {{ message }}
                </p>
            </div>
            <child-app [id] = 1> </child-app>
            <child-app [id] = 2> </child-app>
        </div>
    `,
    providers: [ ParentChildService ]
})
export class ParentComponent {
    childMessages: string[] = [];

    constructor(private parentChildService: ParentChildService) {
        parentChildService.attentionRequested$.subscribe((request) => {
            this.childMessages.push(this.parentChildService.requestedBy + ": " + request);
        });
    }
}

import { Component, OnDestroy, Input } from '@angular/core';
import { ParentChildService } from './parent-child.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'child-app',
    template: `
        <div>
            <div>
                <h2>Hello from {{ id }} child component</h2>
                <span> Message: </span> <input type="text" [(ngModel)]="message">
                <button (click) = "requestAttention();"> Request </button>
            </div>
            <div style="border: 1px dotted green;">
                <p> <b> Sibling message history </b> </p>
                <p *ngFor="let message of siblingMessages">
                    {{ message }}
                </p>
            </div>
        </div>
    `
})
export class ChildComponent implements OnDestroy {
    message: string;
    subscription: Subscription;
    siblingMessages: string[] = [];
    @Input() id: number;

    requestAttention(): void {
        this.parentChildService.requestAttention(this.message, this.id);
    }

    constructor(private parentChildService: ParentChildService) {
        this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => {
            if (this.id != this.parentChildService.requestedBy) {
                this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request);
            }
        });
    }

    ngOnDestroy(): void {
        // prevent memory leak when component destroyed
        this.subscription.unsubscribe();
    }
}

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

@Injectable()
export class ParentChildService {
    // Observable sources
    private requestAttentionSource = new Subject<string>();

    // Observable streams
    attentionRequested$ = this.requestAttentionSource.asObservable();
    requestedBy: number;

    requestAttention(request: string, id: number) {
        this.requestedBy = id;
        this.requestAttentionSource.next(request);
    }
}

从'@angular/core'导入{Component}；
从“./parent-child.service”导入{ParentChildService}；
@组成部分({
选择器：“父应用程序”，
模板：`
家长您好
子消息历史记录

{{message}}

`,
提供者：[父母子女服务]
})
导出类ParentComponent{
子消息：字符串[]=[]；
构造函数（私有parentChildService:parentChildService）{
parentChildService.attentionRequested$.subscribe（（请求）=>{
this.childMessages.push（this.parentChildService.requestedBy+”：“+request）；
});
}
}

子组件.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './app.parent.component';
import { ChildComponent } from './child.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ ParentComponent, ChildComponent ],
    bootstrap: [ ParentComponent ]
})
export class AppModule {}

import { Component } from '@angular/core';
import { ParentChildService } from './parent-child.service';

@Component({
    selector: 'parent-app',
    template: `
        <div>
            <div>
                <h1>Hello from Parent</h1>
            </div>
            <div style="border: 1px dotted blue;">
                <p> <b> Child message history </b> </p>
                <p *ngFor="let message of childMessages">
                    {{ message }}
                </p>
            </div>
            <child-app [id] = 1> </child-app>
            <child-app [id] = 2> </child-app>
        </div>
    `,
    providers: [ ParentChildService ]
})
export class ParentComponent {
    childMessages: string[] = [];

    constructor(private parentChildService: ParentChildService) {
        parentChildService.attentionRequested$.subscribe((request) => {
            this.childMessages.push(this.parentChildService.requestedBy + ": " + request);
        });
    }
}

import { Component, OnDestroy, Input } from '@angular/core';
import { ParentChildService } from './parent-child.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'child-app',
    template: `
        <div>
            <div>
                <h2>Hello from {{ id }} child component</h2>
                <span> Message: </span> <input type="text" [(ngModel)]="message">
                <button (click) = "requestAttention();"> Request </button>
            </div>
            <div style="border: 1px dotted green;">
                <p> <b> Sibling message history </b> </p>
                <p *ngFor="let message of siblingMessages">
                    {{ message }}
                </p>
            </div>
        </div>
    `
})
export class ChildComponent implements OnDestroy {
    message: string;
    subscription: Subscription;
    siblingMessages: string[] = [];
    @Input() id: number;

    requestAttention(): void {
        this.parentChildService.requestAttention(this.message, this.id);
    }

    constructor(private parentChildService: ParentChildService) {
        this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => {
            if (this.id != this.parentChildService.requestedBy) {
                this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request);
            }
        });
    }

    ngOnDestroy(): void {
        // prevent memory leak when component destroyed
        this.subscription.unsubscribe();
    }
}

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

@Injectable()
export class ParentChildService {
    // Observable sources
    private requestAttentionSource = new Subject<string>();

    // Observable streams
    attentionRequested$ = this.requestAttentionSource.asObservable();
    requestedBy: number;

    requestAttention(request: string, id: number) {
        this.requestedBy = id;
        this.requestAttentionSource.next(request);
    }
}

从'@angular/core'导入{Component，OnDestroy，Input}；
从“./parent-child.service”导入{ParentChildService}；
从'rxjs/Subscription'导入{Subscription}；
@组成部分({
选择器：“子应用程序”，
模板：`
来自{{id}}子组件的Hello
信息：
要求
同级消息历史记录

{{message}}

`
})
导出类ChildComponent实现OnDestroy{
消息：字符串；
认购：认购；
同级消息：字符串[]=[]；
@Input（）id:number；
requestAttention（）：void{
this.parentChildService.requestAttention（this.message，this.id）；
}
构造函数（私有parentChildService:parentChildService）{
this.subscription=parentChildService.attentionRequested$.subscripte（（请求，id）=>{
if（this.id！=this.parentChildService.requestedBy）{
this.siblingMessages.push（this.parentChildService.requestedBy+“：”+request）；
}
});
}
ngOnDestroy（）：void{
//防止组件损坏时内存泄漏
this.subscription.unsubscripte（）；
}
}

亲子服务.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './app.parent.component';
import { ChildComponent } from './child.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ ParentComponent, ChildComponent ],
    bootstrap: [ ParentComponent ]
})
export class AppModule {}

import { Component } from '@angular/core';
import { ParentChildService } from './parent-child.service';

@Component({
    selector: 'parent-app',
    template: `
        <div>
            <div>
                <h1>Hello from Parent</h1>
            </div>
            <div style="border: 1px dotted blue;">
                <p> <b> Child message history </b> </p>
                <p *ngFor="let message of childMessages">
                    {{ message }}
                </p>
            </div>
            <child-app [id] = 1> </child-app>
            <child-app [id] = 2> </child-app>
        </div>
    `,
    providers: [ ParentChildService ]
})
export class ParentComponent {
    childMessages: string[] = [];

    constructor(private parentChildService: ParentChildService) {
        parentChildService.attentionRequested$.subscribe((request) => {
            this.childMessages.push(this.parentChildService.requestedBy + ": " + request);
        });
    }
}

import { Component, OnDestroy, Input } from '@angular/core';
import { ParentChildService } from './parent-child.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'child-app',
    template: `
        <div>
            <div>
                <h2>Hello from {{ id }} child component</h2>
                <span> Message: </span> <input type="text" [(ngModel)]="message">
                <button (click) = "requestAttention();"> Request </button>
            </div>
            <div style="border: 1px dotted green;">
                <p> <b> Sibling message history </b> </p>
                <p *ngFor="let message of siblingMessages">
                    {{ message }}
                </p>
            </div>
        </div>
    `
})
export class ChildComponent implements OnDestroy {
    message: string;
    subscription: Subscription;
    siblingMessages: string[] = [];
    @Input() id: number;

    requestAttention(): void {
        this.parentChildService.requestAttention(this.message, this.id);
    }

    constructor(private parentChildService: ParentChildService) {
        this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => {
            if (this.id != this.parentChildService.requestedBy) {
                this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request);
            }
        });
    }

    ngOnDestroy(): void {
        // prevent memory leak when component destroyed
        this.subscription.unsubscribe();
    }
}

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

@Injectable()
export class ParentChildService {
    // Observable sources
    private requestAttentionSource = new Subject<string>();

    // Observable streams
    attentionRequested$ = this.requestAttentionSource.asObservable();
    requestedBy: number;

    requestAttention(request: string, id: number) {
        this.requestedBy = id;
        this.requestAttentionSource.next(request);
    }
}

从'@angular/core'导入{Injectable}；
从'rxjs/Subject'导入{Subject}；
@可注射（）
导出类ParentChildService{
//可观测源
private requestAttentionSource=新主题（）；
//可观测河流
attentionRequested$=this.requestAttentionSource.asObservable（）；
请求人：编号；
requestAttention（请求：字符串，id:编号）{
this.requestedBy=id；
this.requestAttentionSource.next（请求）；
}
}

下面的代码演示了兄弟组件、父组件和子组件之间在angular services帮助下的通信

应用程序模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './app.parent.component';
import { ChildComponent } from './child.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ ParentComponent, ChildComponent ],
    bootstrap: [ ParentComponent ]
})
export class AppModule {}

import { Component } from '@angular/core';
import { ParentChildService } from './parent-child.service';

@Component({
    selector: 'parent-app',
    template: `
        <div>
            <div>
                <h1>Hello from Parent</h1>
            </div>
            <div style="border: 1px dotted blue;">
                <p> <b> Child message history </b> </p>
                <p *ngFor="let message of childMessages">
                    {{ message }}
                </p>
            </div>
            <child-app [id] = 1> </child-app>
            <child-app [id] = 2> </child-app>
        </div>
    `,
    providers: [ ParentChildService ]
})
export class ParentComponent {
    childMessages: string[] = [];

    constructor(private parentChildService: ParentChildService) {
        parentChildService.attentionRequested$.subscribe((request) => {
            this.childMessages.push(this.parentChildService.requestedBy + ": " + request);
        });
    }
}

import { Component, OnDestroy, Input } from '@angular/core';
import { ParentChildService } from './parent-child.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'child-app',
    template: `
        <div>
            <div>
                <h2>Hello from {{ id }} child component</h2>
                <span> Message: </span> <input type="text" [(ngModel)]="message">
                <button (click) = "requestAttention();"> Request </button>
            </div>
            <div style="border: 1px dotted green;">
                <p> <b> Sibling message history </b> </p>
                <p *ngFor="let message of siblingMessages">
                    {{ message }}
                </p>
            </div>
        </div>
    `
})
export class ChildComponent implements OnDestroy {
    message: string;
    subscription: Subscription;
    siblingMessages: string[] = [];
    @Input() id: number;

    requestAttention(): void {
        this.parentChildService.requestAttention(this.message, this.id);
    }

    constructor(private parentChildService: ParentChildService) {
        this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => {
            if (this.id != this.parentChildService.requestedBy) {
                this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request);
            }
        });
    }

    ngOnDestroy(): void {
        // prevent memory leak when component destroyed
        this.subscription.unsubscribe();
    }
}

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

@Injectable()
export class ParentChildService {
    // Observable sources
    private requestAttentionSource = new Subject<string>();

    // Observable streams
    attentionRequested$ = this.requestAttentionSource.asObservable();
    requestedBy: number;

    requestAttention(request: string, id: number) {
        this.requestedBy = id;
        this.requestAttentionSource.next(request);
    }
}

app.parent.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './app.parent.component';
import { ChildComponent } from './child.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ ParentComponent, ChildComponent ],
    bootstrap: [ ParentComponent ]
})
export class AppModule {}

import { Component } from '@angular/core';
import { ParentChildService } from './parent-child.service';

@Component({
    selector: 'parent-app',
    template: `
        <div>
            <div>
                <h1>Hello from Parent</h1>
            </div>
            <div style="border: 1px dotted blue;">
                <p> <b> Child message history </b> </p>
                <p *ngFor="let message of childMessages">
                    {{ message }}
                </p>
            </div>
            <child-app [id] = 1> </child-app>
            <child-app [id] = 2> </child-app>
        </div>
    `,
    providers: [ ParentChildService ]
})
export class ParentComponent {
    childMessages: string[] = [];

    constructor(private parentChildService: ParentChildService) {
        parentChildService.attentionRequested$.subscribe((request) => {
            this.childMessages.push(this.parentChildService.requestedBy + ": " + request);
        });
    }
}

import { Component, OnDestroy, Input } from '@angular/core';
import { ParentChildService } from './parent-child.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'child-app',
    template: `
        <div>
            <div>
                <h2>Hello from {{ id }} child component</h2>
                <span> Message: </span> <input type="text" [(ngModel)]="message">
                <button (click) = "requestAttention();"> Request </button>
            </div>
            <div style="border: 1px dotted green;">
                <p> <b> Sibling message history </b> </p>
                <p *ngFor="let message of siblingMessages">
                    {{ message }}
                </p>
            </div>
        </div>
    `
})
export class ChildComponent implements OnDestroy {
    message: string;
    subscription: Subscription;
    siblingMessages: string[] = [];
    @Input() id: number;

    requestAttention(): void {
        this.parentChildService.requestAttention(this.message, this.id);
    }

    constructor(private parentChildService: ParentChildService) {
        this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => {
            if (this.id != this.parentChildService.requestedBy) {
                this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request);
            }
        });
    }

    ngOnDestroy(): void {
        // prevent memory leak when component destroyed
        this.subscription.unsubscribe();
    }
}

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

@Injectable()
export class ParentChildService {
    // Observable sources
    private requestAttentionSource = new Subject<string>();

    // Observable streams
    attentionRequested$ = this.requestAttentionSource.asObservable();
    requestedBy: number;

    requestAttention(request: string, id: number) {
        this.requestedBy = id;
        this.requestAttentionSource.next(request);
    }
}

从'@angular/core'导入{Component}；
从“./parent-child.service”导入{ParentChildService}；
@组成部分({
选择器：“父应用程序”，
模板：`
家长您好
子消息历史记录

{{message}}

`,
提供者：[父母子女服务]
})
导出类ParentComponent{
子消息：字符串[]=[]；
构造函数（私有parentChildService:parentChildService）{
parentChildService.attentionRequested$.subscribe（（请求）=>{
this.childMessages.push（this.parentChildService.requestedBy+”：“+request）；
});
}
}

子组件.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './app.parent.component';
import { ChildComponent } from './child.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ ParentComponent, ChildComponent ],
    bootstrap: [ ParentComponent ]
})
export class AppModule {}

import { Component } from '@angular/core';
import { ParentChildService } from './parent-child.service';

@Component({
    selector: 'parent-app',
    template: `
        <div>
            <div>
                <h1>Hello from Parent</h1>
            </div>
            <div style="border: 1px dotted blue;">
                <p> <b> Child message history </b> </p>
                <p *ngFor="let message of childMessages">
                    {{ message }}
                </p>
            </div>
            <child-app [id] = 1> </child-app>
            <child-app [id] = 2> </child-app>
        </div>
    `,
    providers: [ ParentChildService ]
})
export class ParentComponent {
    childMessages: string[] = [];

    constructor(private parentChildService: ParentChildService) {
        parentChildService.attentionRequested$.subscribe((request) => {
            this.childMessages.push(this.parentChildService.requestedBy + ": " + request);
        });
    }
}

import { Component, OnDestroy, Input } from '@angular/core';
import { ParentChildService } from './parent-child.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'child-app',
    template: `
        <div>
            <div>
                <h2>Hello from {{ id }} child component</h2>
                <span> Message: </span> <input type="text" [(ngModel)]="message">
                <button (click) = "requestAttention();"> Request </button>
            </div>
            <div style="border: 1px dotted green;">
                <p> <b> Sibling message history </b> </p>
                <p *ngFor="let message of siblingMessages">
                    {{ message }}
                </p>
            </div>
        </div>
    `
})
export class ChildComponent implements OnDestroy {
    message: string;
    subscription: Subscription;
    siblingMessages: string[] = [];
    @Input() id: number;

    requestAttention(): void {
        this.parentChildService.requestAttention(this.message, this.id);
    }

    constructor(private parentChildService: ParentChildService) {
        this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => {
            if (this.id != this.parentChildService.requestedBy) {
                this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request);
            }
        });
    }

    ngOnDestroy(): void {
        // prevent memory leak when component destroyed
        this.subscription.unsubscribe();
    }
}

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

@Injectable()
export class ParentChildService {
    // Observable sources
    private requestAttentionSource = new Subject<string>();

    // Observable streams
    attentionRequested$ = this.requestAttentionSource.asObservable();
    requestedBy: number;

    requestAttention(request: string, id: number) {
        this.requestedBy = id;
        this.requestAttentionSource.next(request);
    }
}

从'@angular/core'导入{Component，OnDestroy，Input}；
从“./parent-child.service”导入{ParentChildService}；
从'rxjs/Subscription'导入{Subscription}；
@组成部分({
选择器：“子应用程序”，
模板：`
来自{{id}}子组件的Hello
信息：
要求
同级消息历史记录

{{message}}

`
})
导出类ChildComponent实现OnDestroy{