angular版 模版插座指令

歡迎關注github:https://github.com/myopenresources

 

angular版 模版插座指令

安裝

npm install cc-custom-tpl --save 或 yarn add cc-custom-tpl

使用

//========string-template-outlet========

// 業務模塊

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { CustomTemplateModule } from 'cc-custom-tpl';

 

import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';

 

@NgModule({

  declarations: [

    AppComponent,

    HeaderComponent

  ],

  imports: [

    BrowserModule,

    CustomTemplateModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

 

 

 

//header組件

<div style="text-align:center">

    <ng-container *ccStringTemplateOutlet="sysLogo">

        <img [src]="sysLogo">

    </ng-container>

</div>

 

import { Component, OnInit, Input, TemplateRef } from '@angular/core';

 

@Component({

  selector: 'app-header',

  templateUrl: './header.component.html',

  styleUrls: ['./header.component.less']

})

export class HeaderComponent implements OnInit {

 

  @Input()

  sysLogo: string | TemplateRef<void>;

 

  constructor() { }

 

  ngOnInit() {

  }

}

 

//業務html

<app-header [sysLogo]="'這裏是一個logo'"></app-header>

 

 

//========template-outlet========

// 業務模塊

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { CustomTemplateModule } from 'cc-custom-tpl';

 

import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';

 

@NgModule({

  declarations: [

    AppComponent,

    HeaderComponent

  ],

  imports: [

    BrowserModule,

    CustomTemplateModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

//header組件

<div style="text-align:center">

    <ng-container *ccTemplateOutlet="sysHtml">

    </ng-container>

</div>

 

import { Component, OnInit, Input, TemplateRef } from '@angular/core';

 

@Component({

  selector: 'app-header',

  templateUrl: './header.component.html',

  styleUrls: ['./header.component.less']

})

export class HeaderComponent implements OnInit {

 

  @Input()

  sysHtml: TemplateRef<void>;

 

  constructor() { }

 

  ngOnInit() {

  }

 

}

 

 

<app-header  [sysHtml]="sysHtmlTpl">

  <ng-template #sysHtmlTpl>

    <div>這裏是一個模版</div>

  </ng-template>

</app-header>

 

 

參數

1. *ccStringTemplateOutlet：字符串值或模版

2. *ccTemplateOutlet：模版