fix: 修订完属性型指令和组件样式
This commit is contained in:
parent
08a3f07305
commit
c1b85f3266
|
@ -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.
|
||||||
|
|
|
@ -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).
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue