Angular 2：如何从代码中动态加载另一个组件内的组件控件
[英]Angular 2 : How to dynamically load component control inside another component from code
问题描述
I need a help . 
我需要帮助。 How to render from typescript 如何从打字稿中呈现
looking for help using @angular/core. 使用@ angular / core寻求帮助。
import { Component } from '@angular/core'; 从'@ angular / core'导入{Component};
@Component({ selector: 'childcomp', template: <div>{{html}}</div> }) export class ChildComponent { html:string = " @Component（{selector：'childcomp'，template： <div>{{html}}</div> }）export class ChildComponent {html：string =“
Child Component 子组件
"; parentAttribID :string =25 ;
“; parentAttribID：string = 25;
} }
@Component({ selector: 'anotherchildcomp', template: <h1>Another Child Component</h1> }) export class AnotherChildComponent { @Input attribID: string ; @Component（{selector：'anotherchildcomp'，template： <h1>Another Child Component</h1> }）导出类AnotherChildComponent {@Input attribID：string;
} }
2 个解决方案
解决方案1
0 2017-05-10 08:55:20
Go throug the example 通过这个例子来看看
<html>
<head>
<title>Angular 2 Nested Components</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
Injecting child components 注入子组件
const {Component} = ng.core;
const {bootstrap} = ng.platform.browser;
@Component({
selector: 'child-component',
styles : [`
.child {
background : #aaa;
padding: 10px;
overflow:auto;
}
.book{
background : #0a0;
padding:20px;
margin:10px;
width:300px;
float:left;
}
`],
template: `
<div class="child">
<h2>Books :</h2>
<div class="book" *ngFor="#book of books">
<h4> Title : {{book.title}} </h4> <h4>Price: {{book.price}}</h4>
</div>
</div>
`
})
class ChildComponent {
books = [
{
title : 'Love Story',
price : 'Rs. 1400'
},
{
title : 'Two States',
price : 'Rs. 1700'
},
{
title : 'Computer fundamentals',
price : 'Rs. 1000'
}
]
}
@Component({
selector: 'my-app',
styles : [`
.parent {
background : #c7c7c7;
padding: 20px;
}
`],
template: `
<div class="parent">
<h1>Author : {{name}}</h1>
<child-component></child-component>
</div>
`,
directives : [ChildComponent]
})
class AppComponent {
name = "John Doe"
}
bootstrap(AppComponent, []);
解决方案2
0 2017-05-10 16:23:29
https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
Can you look in to this link. 你能看看这个链接吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.