All geek questions in one place

How to make a partial internal template

I am using angular 2 for a project and I want to display partial inside a template without creating a component. Is it possible?

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 Salon Template

 <!-- import navigation.html here --> <p> Hello World </p> <router-outlet></router-outlet>
+5
source share
1 answer

Well, if your template is part of another component, call it, NavigationComponent, which has a “navigation component” selector, then you can add this tag to your ng2-show-app template and add the navigation component as a directive ...

 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>

But I guess what you're really going to use is the more common HTML homepage script, which is always there, and then the template, which will change based on navigation ...

 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>

Now, when they click on the link "Link to Page 1", everything that you defined in Page1Component will be displayed inside the <router-outlet> placeholder.

+3
source

Source: https://habr.com/ru/post/1244378/

More articles:


All Articles