fix: 修订完属性型指令和组件样式

This commit is contained in:
Zhicheng Wang 2017-03-03 17:20:27 +08:00
parent 08a3f07305
commit c1b85f3266
2 changed files with 5 additions and 10 deletions

View File

@ -51,10 +51,15 @@ a#directive-overview
在 Angular 中有三种类型的指令: 在 Angular 中有三种类型的指令:
1. Components—directives with a template. 1. Components—directives with a template.
组件 — 拥有模板的指令 组件 — 拥有模板的指令
1. Structural directives—change the DOM layout by adding and removing DOM elements. 1. Structural directives—change the DOM layout by adding and removing DOM elements.
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
1. Attribute directives—change the appearance or behavior of an element. 1. Attribute directives—change the appearance or behavior of an element.
属性型指令 — 改变元素显示和行为的指令。 属性型指令 — 改变元素显示和行为的指令。
*Components* are the most common of the three directives. *Components* are the most common of the three directives.

View File

@ -126,8 +126,6 @@ a(id="special-selectors")
### :host ### :host
### :host
Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to
targeting elements *inside* the component's template): targeting elements *inside* the component's template):
@ -157,8 +155,6 @@ a(id="special-selectors")
:marked :marked
### :host-context ### :host-context
### :host-context
Sometimes it is useful to apply styles based on some condition *outside* a component's view. Sometimes it is useful to apply styles based on some condition *outside* a component's view.
For example, there may be a CSS theme class applied to the document `<body>` element, and For example, there may be a CSS theme class applied to the document `<body>` element, and
we want to change how our component looks based on that. we want to change how our component looks based on that.
@ -183,8 +179,6 @@ a(id="special-selectors")
:marked :marked
### /deep/ ### /deep/
### /deep/
Component styles normally apply only to the HTML in the component's own template. Component styles normally apply only to the HTML in the component's own template.
组件样式通常只会作用于组件自身的 HTML 上。 组件样式通常只会作用于组件自身的 HTML 上。
@ -304,8 +298,6 @@ block module-bundlers
`styles: [require('my.component.css')]` `styles: [require('my.component.css')]`
`styles: [require('my.component.css')]`
We set the `styles` property, **not** `styleUrls` property! The module We set the `styles` property, **not** `styleUrls` property! The module
bundler is loading the CSS strings, not Angular. bundler is loading the CSS strings, not Angular.
Angular only sees the CSS strings *after* the bundler loads them. Angular only sees the CSS strings *after* the bundler loads them.
@ -338,8 +330,6 @@ block module-bundlers
:marked :marked
### CSS @imports ### CSS @imports
### CSS @imports
We can also import CSS files into our CSS files by using the standard CSS We can also import CSS files into our CSS files by using the standard CSS
[`@import` rule](https://developer.mozilla.org/en/docs/Web/CSS/@import). [`@import` rule](https://developer.mozilla.org/en/docs/Web/CSS/@import).