如何将一个组件数据包含在Angular 4中的另一个组件中

时间:2017-07-22 13:13:57

标签: javascript angular

我想将一个组件HTML数据包含到另一个组件中。我尝试了很多,但我无法得到结果。

</hello> </hello>是HelloComponent的选择器标记,我将其包含在AppComponent中。但是它没有显示app.component.html页面中的组合数据。

app.component.ts

import { Component } from '@angular/core';
import { HelloComponent } from './hello.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'app';
    htmldata = '';

    ngOnInit(){
        this.createHtmlData();
    }

    createHtmlData() {
        //</hello></hello> is selector tag of hello.component.ts
        this .htmldata = '<p>My Data</p><hello></hello>';
    }
}//class

app.component.html

<div class="container">
    <h1> {{ title }} </h1>
    <div>{{ htmldata }}</div>
</div>

hello.component.ts

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

@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})

export class HelloComponent {

}

hello.component.html

<div class="take-action">
    <span class="un_config_link" (click)="takeAnAction()">Take an action on</span>
</div>

1 个答案:

答案 0 :(得分:0)

您从AppComponent中的hello.component.js导入HelloComponent,但它只导出PopupComponent并且您的选择器错误

[edit]你需要将HelloComponent添加到你的应用程序的模块声明中,删除helloComponent的@component块和下面的类之间的空行然后它会工作我相信。