Come rendere parziale il modello interno

Question

Sto usando angolare 2 per un progetto e voglio rendere un partial all'interno di un modello senza creare un componente. È possibile?

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-template

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

<p> 
    Hello World 
</p> 

<router-outlet></router-outlet> 

Answer 1

Beh, se il modello fa parte di un altro componente, chiamare, NavigationComponent che ha un selettore di 'navigazione componenti', poi si può aggiungere che tag per il modello NG2-showroom-app e aggiungere il componente di navigazione come una direttiva ...

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> 

Ma sono indovinare che cosa realmente state andando per è lo scenario più comune di una pagina master che ha HTML che è sempre lì, e poi un modello che viene scambiato, basata sulla navigazione ...

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> 

Ora quando fanno clic su "Collega alla pagina 1", qualsiasi cosa definita in Page1Component verrà visualizzata all'interno del segnaposto <router-outlet>.