真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

@Component({
    selector: '[appButton]',
    template: `
    
`
})
export class AppButtonComponent {}

click

@Component({
    selector: '[appButton]',
    template: `
     
`
})
export class AppButtonComponent {}

click

@Component({
    selector: '[appButton]',
    template: `
       
`
})
export class AppButtonComponent {}

click
 me here

@Component({
    selector: 'app-card',
    template: `
		
		  
		    
		  

使用：

  
    

      
Angular
    
  
  One framework. Mobile & desktop.
  

由于 ng-container 的存在，header 部分并沒有被渲染到我們想要渲染的插槽中，而是渲染到了沒有提供任何 selector 的 ng-content 中。
在這種情況下，我們可以使用 ngProjectAs 屬性。
在上面的 ng-container 加上這個屬性，就可以按照我們的期望來渲染了。

  
    

      
Angular
    
  
  One framework. Mobile & desktop.
  

二、 有條件的內(nèi)容投影

如果你的元件需要有條件地渲染內(nèi)容或多次渲染內(nèi)容，則應(yīng)配置該元件以接受一個 ng-template 元素，其中包含要有條件渲染的內(nèi)容。

在這種情況下，不建議使用 ng-content 元素，因?yàn)橹灰氖褂谜咛峁┝藘?nèi)容，即使該元件從未定義 ng-content 元素或該 ng-content 元素位于 ngIf 語句的內(nèi)部，該內(nèi)容也總會被初始化。

使用 ng-template 元素，你可以讓元件根據(jù)你想要的任何條件顯式渲染內(nèi)容，并可以進(jìn)行多次渲染。在顯式渲染 ng-template 元素之前，Angular 不會初始化該元素的內(nèi)容。

2.1 ng-container

既不是一個組件，也不是一個指令，僅僅是一個特殊的tag而已。 使用 ng-container 渲染所包含的模板內(nèi)容，不包含自身。

• angular代碼片段

  
    
My name is wyl.
    
What is you name?
  

• 瀏覽器調(diào)試窗口，可以發(fā)現(xiàn) 標(biāo)簽消失了，并沒有起任何作用

  
My name is wyl.
  
What is you name?

• 使用場景，如下，在我們需要遍歷或 if 判斷 時，它可以承擔(dān)一個載體的作用

  
    
{{ item .name}}
    
{{ item .age}}
    
{{ item .sex}}
  

另外，ng 中常見錯誤之一的 for 和 if 不能寫在同一標(biāo)簽上（在一個宿主元素上只能應(yīng)用一個結(jié)構(gòu)型指令），利用 ng-container 標(biāo)簽可以在實(shí)現(xiàn)功能的基礎(chǔ)上減少層級的嵌套。

2.2 ng-template

先來看下面一段代碼

    
 In template, no attributes. 



    
 In ng-container, no attributes. 

瀏覽器輸出結(jié)果是：

In ng-container, no attributes.

即 中的內(nèi)容不會顯示。當(dāng)在上面的模板中添加 ngIf 指令：

   
 ngIf with a ng-template.



   
 ngIf with an ng-container.

瀏覽器輸出結(jié)果是：

ngIf with a ng-template.
ngIf with an ng-container.

2.3 ng-template 和 的配合使用

     暫時搜索不到您要的數(shù)據(jù)喔


     快快開始獲取吧！

2.4 ngTemplateOutlet

插入 ng-template 創(chuàng)建的內(nèi)嵌視圖。 ngTemplateOutlet 是一個結(jié)構(gòu)型指令，接收一個 TemplateRef 類型的值；

  I am span in template {{title}}

*ngTemplateOutlet = "templateRefExp; content: contentExp "

• templateRefExp: ng-template 元素的 #ID

• contextExp:

• 可空參數(shù)

• content 是一個對象，這個對象可以包含一個 $implicit 的 key 作為默認(rèn)值， 使用時在 模板 中用 let-key 語句進(jìn)行綁定

• content 的非默認(rèn)字段需要使用 let-templateKey=contentKey 語句進(jìn)行綁定

使用如下：

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    
    

    
    

    
    

    Hello
    Hello {{name}}!
    Ahoj {{person}}!
`
})
class NgTemplateOutletExample {
  myContext = {$implicit: 'World', localSk: 'Svet'};
}

2.5 利用 ngTemplateOutlet 進(jìn)行內(nèi)容投影

@Component({
    selector: 'app-card',
    template: `
		
		  
		  	
		  
		
`
})
export class AppCardComponent {

	@ContentChild('header', { static: true }) headerTemplate: TemplateRef;

	public title = 'Test';
	public otherDate = {
	 	auth: 'me',
	 	name: 'appCard'
	};
}

使用

  
    
Angular
 {{label}} (Test) and  {{otherDate | json}} ({auth: 'me', name: 'appCard'})
  

到此，關(guān)于“angular中怎么進(jìn)行內(nèi)容投影”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！