आंशिक अंदर टेम्पलेट

Question

मैं प्रोजेक्ट के लिए कोणीय 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> 

Answer 1

ठीक है, अगर अपने टेम्पलेट एक और घटक का हिस्सा है, इसे कहते, NavigationComponent जो 'नेविगेशन घटक' का एक चयनकर्ता है, तो आप जोड़ सकते हैं कि अपने NG2-शोरूम-ऐप टेम्पलेट के लिए टैग और एक निर्देश के रूप में नेविगेशन घटक जोड़ने ...

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' पर क्लिक करते हैं, जो भी आपने पेज 1 कॉम्पोनेंट में परिभाषित किया है, वह <router-outlet> प्लेसहोल्डर के भीतर प्रदर्शित होगा।