【Angular Tips】開發Angular2+應用有用的tips... 【持續更新】

1. 使用ng-content來作內容填充

有的時候，咱們可能但願在一個組件裏面動態的嵌入其餘組件，咱們除了使用*ngIf來動態地顯示或隱藏其餘組件，還可使用ng-content來作。

好比咱們定義一個組件：
在template裏面加入<ng-content>來做爲一個佔位符，

@Component({
    selector: 'quote',
    template: `
        <div style="margin: 20px;">
            <h1>I will never let you down.</h1>
            <h2>And you will never walk alone.</h2>
            <ng-content></ng-content>
        </div>
    `
}）

在其餘組件中咱們來使用剛纔定義的組件：

<quote>
   <h4>Way to go.</h4>
   <h6>Keep up the good work.</h6>
</quote>

這個時候，h4和h6就會被添加到組件quote中。

//Output
I will never let you down.
And you will never walk alone.
Way to go.
Keep up the good work.

那假如咱們但願根據不一樣的狀況也選擇添加不一樣的組件呢？ 固然咱們可使用*ngSwitchCase來作，但實際上ng-content已經給咱們添加了一個select屬性，來能夠選擇顯示指定的組件：

修改一下咱們的quote組件, 我只但願顯示標籤名是h4的組件，因此使用select="h4"

@Component({
    selector: 'quote',
    template: `
        <div style="margin: 20px;">
            <h1>I will never let you down.</h1>
            <h2>And you will never walk alone.</h2>
            <ng-content select="h4"></ng-content>
        </div>
    `
}）

在其餘組件中咱們仍是來使用剛纔定義的組件quote：

<quote>
   <h4>Way to go.</h4>
   <h6>Keep up the good work.</h6>
</quote>

這個時候，只有h4就會被添加到組件quote中。

//Output
I will never let you down.
And you will never walk alone.
Way to go.

除了能夠直接指定元素的標籤外，還能夠經過[attr]的方式來綁定元素的某一個屬性，而後指定顯示有這個屬性的元素。

咱們繼續來修改組件quote, 咱們使用select="[show]"來指定顯示全部有show屬性的元素：

@Component({
    selector: 'quote',
    template: `
        <div style="margin: 20px;">
            <h1>I will never let you down.</h1>
            <h2>And you will never walk alone.</h2>
            <ng-content select="h4"></ng-content>
            <ng-content select="[show]"></ng-content>
        </div>
    `
}）

在其餘組件中咱們仍是來使用剛纔定義的組件quote：

<quote>
   <h4>Way to go.</h4>
   <h6 show>Keep up the good work.</h6>
   <h5 show>And Never give up.</h5>
</quote>

這個時候，指定標籤顯示的h4和指定屬性show顯示的h5和h6就會被添加到組件quote中。

//Output
I will never let you down.
And you will never walk alone.
Way to go.
Keep up the good work.
And Never give up.

2. 使用ng-container來搭配結構化指令包裹代碼

在開發angular應用時，咱們常常會用到結構化指令ngIf來動態顯示某一段代碼

好比下面的例子

<div *ngIf="show">
   <div>Div One</div>
   <div>Div Two</div>
</div>

咱們使用了div來包裹兩個子div, 而後經過變量show來動態顯示或者隱藏。
但這卻不是最好的解決方案, 緣由有兩個：
1). 咱們在DOM中添加了一個沒必要要的節點div
2). 這個添加的div節點有可能會搞亂咱們的樣式。

那有沒有更好一點的解決方式呢？
有的， angular提供了ng-container來幫助咱們更好的來包裹代碼，並且不會在DOM創造沒必要要的節點。
因此咱們能夠直接這樣使用：

<ng-container *ngIf="show">
   <div>Div One</div>
   <div>Div Two</div>
</ng-container>

ng-container是一個邏輯容器，可用於來分組節點，並且不會在DOM中被渲染成節點， 而是會被渲染成一個comment.
ng-container 不只能夠用來搭配使用ngIf,還能夠搭配使用ngSwitch中的ngSwitchCase,這樣咱們就不必建立出多餘的tag了。

因此說，使用ng-container最大的好處就是讓咱們的template更乾淨了，沒有冗餘節點。