Cách hiển thị một phần bên trong mẫu

Question

Tôi đang sử dụng góc 2 cho một dự án và tôi muốn hiển thị một phần bên trong mẫu mà không cần tạo thành phần. Điều đó có thể không?

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-showroom-mẫu

<!-- import navigation.html here --> 

<p> 
    Hello World 
</p> 

<router-outlet></router-outlet> 

Answer 1

Vâng, nếu mẫu của bạn là một phần của thành phần khác, gọi nó, NavigationComponent trong đó có một selector của 'chuyển hướng thành phần', sau đó bạn có thể thêm rằng thẻ để mẫu ng2-showroom-ứng dụng của bạn và thêm các thành phần chuyển hướng như một chỉ thị ...

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> 

Nhưng tôi đoán những gì bạn đang thực sự xảy ra cho được các kịch bản phổ biến hơn của một trang chủ có HTML mà phải lúc nào cũng có, và sau đó một mẫu đó được tháo ra, dựa trên chuyển hướng ...

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> 

Bây giờ khi họ nhấp vào 'Liên kết đến Trang 1', bất kỳ điều gì bạn đã xác định trong Page1Component sẽ hiển thị trong trình giữ chỗ <router-outlet>.