![](/img/trans.png)
[英]AngularJS to render a template inside a compile inside a loop inside a partial
[英]How to render partial inside template
我正在使用角度2作为项目,我想在模板内部渲染部分而不创建组件。 那可能吗?
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
selector: 'ng2-showroom-app',
providers: [],
templateUrl: 'app/views/ng2-showroom-template.html',
directives: [ROUTER_DIRECTIVES],
pipes: []
})
@RouteConfig([
])
export class Ng2Showroom {
}
NG2-展厅模板
<!-- import navigation.html here -->
<p>
Hello World
</p>
<router-outlet></router-outlet>
好吧,如果您的模板是另一个组件的一部分,请调用它,NavigationComponent有一个'navigation-component'选择器,然后您可以将该标签添加到您的ng2-showroom-app模板并添加导航组件作为指令。 。
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {NavigationComponent} from 'src/navigationComponent';
@Component({
selector: 'ng2-showroom-app',
providers: [],
templateUrl: 'app/views/ng2-showroom-template.html',
directives: [ROUTER_DIRECTIVES, NavigationComponent],
pipes: []
})
@RouteConfig([
])
export class Ng2Showroom {
}
<navigation-component></navigation-component>
<p>
Hello World
</p>
<router-outlet></router-outlet>
但是我猜你真正想要的是一个主页的更常见的场景,它总是有HTML,然后是一个基于导航换出的模板......
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Page1Component} from 'src/page1component';
import {Page2Component} from 'src/page2component';
@Component({
selector: 'ng2-showroom-app',
providers: [],
templateUrl: 'app/views/ng2-showroom-template.html',
directives: [ROUTER_DIRECTIVES],
pipes: []
})
@RouteConfig([
{ path: '/page1', as: 'Page1', component: Page1Component },
{ path: '/page2', as: 'Page2', component: Page2Component }])
export class Ng2Showroom {
}
<p>HTML always shown above content, regardless of navigation.</p>
<a [routerLink]="['Page1']">Link to Page 1</a>
<a [routerLink]="['Page2']">Link to Page 2</a>
<router-outlet></router-outlet>
<p>HTML always shown below content.</p>
现在,当他们点击“链接到第1页”时,无论您在Page1Component中定义的内容都将显示在<router-outlet>
占位符中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.