【Angular Tips】开发Angular2+应用有用的tips... 【持续更新】

1. 使用ng-content来做内容填充

有的时候,我们可能希望在一个组件里面动态的嵌入其他组件,我们除了使用*ngIf来动态地显示或隐藏其他组件,还可以使用ng-content来做。

比如我们定义一个组件:
在template里面加入来作为一个占位符,

@Component({
    selector: 'quote',
    template: `
        

I will never let you down.

And you will never walk alone.

` })

在其他组件中我们来使用刚才定义的组件:


   

Way to go.

Keep up the good work.

这个时候,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: `
        

I will never let you down.

And you will never walk alone.

` })

在其他组件中我们还是来使用刚才定义的组件quote:


   

Way to go.

Keep up the good work.

这个时候,只有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: `
        

I will never let you down.

And you will never walk alone.

` })

在其他组件中我们还是来使用刚才定义的组件quote:


   

Way to go.

Keep up the good work.
And Never give up.

这个时候,指定标签显示的h4和指定属性show显示的h5h6就会被添加到组件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 One
Div Two

我们使用了div来包裹两个子div, 然后通过变量show来动态显示或者隐藏。
但这却不是最好的解决方案, 原因有两个:
1). 我们在DOM中添加了一个不必要的节点div
2). 这个添加的div节点有可能会搞乱我们的样式。

那有没有更好一点的解决方式呢?
有的, angular提供了ng-container来帮助我们更好的来包裹代码,而且不会在DOM创造不必要的节点。
所以我们可以直接这样使用:


   
Div One
Div Two

ng-container是一个逻辑容器,可用于来分组节点,而且不会在DOM中被渲染成节点, 而是会被渲染成一个comment.
ng-container 不仅可以用来搭配使用ngIf,还可以搭配使用ngSwitch中的ngSwitchCase,这样我们就没必要创建出多余的tag了。

所以说,使用ng-container最大的好处就是让我们的template更干净了,没有冗余节点。

你可能感兴趣的:(angular5,angular4,angular2)