|
| 1 | + |
| 2 | +p.location-badge. |
| 3 | + exported from <a href='../annotations'>angular2/annotations</a> |
| 4 | + defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.ts#L778-L1011">angular2/src/core/annotations_impl/annotations.ts (line 778)</a> |
| 5 | + |
| 6 | +:markdown |
| 7 | + Declare reusable UI building blocks for an application. |
| 8 | + |
| 9 | + Each Angular component requires a single `@Component` and at least one `@View` annotation. The |
| 10 | + `@Component` |
| 11 | + annotation specifies when a component is instantiated, and which properties and hostListeners it |
| 12 | + binds to. |
| 13 | + |
| 14 | + When a component is instantiated, Angular |
| 15 | + - creates a shadow DOM for the component. |
| 16 | + - loads the selected template into the shadow DOM. |
| 17 | + - creates a child <a href='../di/Injector-class.html'><code>Injector</code></a> which is configured with the `appInjector` for the |
| 18 | + <a href='Component-var.html'><code>Component</code></a>. |
| 19 | + |
| 20 | + All template expressions and statements are then evaluated against the component instance. |
| 21 | + |
| 22 | + For details on the `@View` annotation, see <a href='View-var.html'><code>View</code></a>. |
| 23 | + |
| 24 | + ## Example |
| 25 | + |
| 26 | + ``` |
| 27 | + @Component({ |
| 28 | + selector: 'greet' |
| 29 | + }) |
| 30 | + @View({ |
| 31 | + template: 'Hello {{name}}!' |
| 32 | + }) |
| 33 | + class Greet { |
| 34 | + name: string; |
| 35 | + |
| 36 | + constructor() { |
| 37 | + this.name = 'World'; |
| 38 | + } |
| 39 | + } |
| 40 | + ``` |
| 41 | + |
| 42 | + |
| 43 | + Dynamically loading a component at runtime: |
| 44 | + |
| 45 | + Regular Angular components are statically resolved. Dynamic components allows to resolve a |
| 46 | + component at runtime |
| 47 | + instead by providing a placeholder into which a regular Angular component can be dynamically |
| 48 | + loaded. Once loaded, |
| 49 | + the dynamically-loaded component becomes permanent and cannot be changed. |
| 50 | + Dynamic components are declared just like components, but without a `@View` annotation. |
| 51 | + |
| 52 | + |
| 53 | + ## Example |
| 54 | + |
| 55 | + Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic |
| 56 | + component |
| 57 | + `DynamicComp` requests loading of the `HelloCmp` component. |
| 58 | + |
| 59 | + There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be |
| 60 | + used in other static |
| 61 | + locations. |
| 62 | + |
| 63 | + ``` |
| 64 | + @Component({ |
| 65 | + selector: 'dynamic-comp' |
| 66 | + }) |
| 67 | + class DynamicComp { |
| 68 | + helloCmp:HelloCmp; |
| 69 | + constructor(loader:DynamicComponentLoader, location:ElementRef) { |
| 70 | + loader.load(HelloCmp, location).then((helloCmp) => { |
| 71 | + this.helloCmp = helloCmp; |
| 72 | + }); |
| 73 | + } |
| 74 | + } |
| 75 | + |
| 76 | + @Component({ |
| 77 | + selector: 'hello-cmp' |
| 78 | + }) |
| 79 | + @View({ |
| 80 | + template: "{{greeting}}" |
| 81 | + }) |
| 82 | + class HelloCmp { |
| 83 | + greeting:string; |
| 84 | + constructor() { |
| 85 | + this.greeting = "hello"; |
| 86 | + } |
| 87 | + } |
| 88 | + ``` |
| 89 | + |
| 90 | + |
| 91 | +.l-main-section |
| 92 | + h2 Members |
| 93 | + .l-sub-section |
| 94 | + h3 constructor |
| 95 | + |
| 96 | + |
| 97 | + pre.prettyprint |
| 98 | + code. |
| 99 | + constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes, |
| 100 | + hostActions, appInjector, lifecycle, hostInjector, viewInjector, |
| 101 | + changeDetection = DEFAULT, compileChildren = true}: { |
| 102 | + selector?: string, |
| 103 | + properties?: List<string>, |
| 104 | + events?: List<string>, |
| 105 | + hostListeners?: StringMap<string, string>, |
| 106 | + hostProperties?: StringMap<string, string>, |
| 107 | + hostAttributes?: StringMap<string, string>, |
| 108 | + hostActions?: StringMap<string, string>, |
| 109 | + appInjector?: List<any>, |
| 110 | + lifecycle?: List<LifecycleEvent>, |
| 111 | + hostInjector?: List<any>, |
| 112 | + viewInjector?: List<any>, |
| 113 | + changeDetection?: string, |
| 114 | + compileChildren?: boolean |
| 115 | + } = {}) |
| 116 | + |
| 117 | + :markdown |
| 118 | + |
| 119 | + |
| 120 | + |
| 121 | + |
| 122 | + |
| 123 | + |
| 124 | + .l-sub-section |
| 125 | + h3 appInjector |
| 126 | + |
| 127 | + |
| 128 | + :markdown |
| 129 | + |
| 130 | + Defines the set of injectable objects that are visible to a Component and its children. |
| 131 | + |
| 132 | + The `appInjector` defined in the Component annotation allow you to configure a set of bindings |
| 133 | + for the component's |
| 134 | + injector. |
| 135 | + |
| 136 | + When a component is instantiated, Angular creates a new child Injector, which is configured |
| 137 | + with the bindings in |
| 138 | + the Component `appInjector` annotation. The injectable objects then become available for |
| 139 | + injection to the component |
| 140 | + itself and any of the directives in the component's template, i.e. they are not available to |
| 141 | + the directives which |
| 142 | + are children in the component's light DOM. |
| 143 | + |
| 144 | + |
| 145 | + The syntax for configuring the `appInjector` injectable is identical to <a href='../di/Injector-class.html'><code>Injector</code></a> |
| 146 | + injectable configuration. |
| 147 | + See <a href='../di/Injector-class.html'><code>Injector</code></a> for additional detail. |
| 148 | + |
| 149 | + |
| 150 | + ## Simple Example |
| 151 | + |
| 152 | + Here is an example of a class that can be injected: |
| 153 | + |
| 154 | + ``` |
| 155 | + class Greeter { |
| 156 | + greet(name:string) { |
| 157 | + return 'Hello ' + name + '!'; |
| 158 | + } |
| 159 | + } |
| 160 | + |
| 161 | + @Component({ |
| 162 | + selector: 'greet', |
| 163 | + appInjector: [ |
| 164 | + Greeter |
| 165 | + ] |
| 166 | + }) |
| 167 | + @View({ |
| 168 | + template: `{{greeter.greet('world')}}!`, |
| 169 | + directives: [Child] |
| 170 | + }) |
| 171 | + class HelloWorld { |
| 172 | + greeter:Greeter; |
| 173 | + |
| 174 | + constructor(greeter:Greeter) { |
| 175 | + this.greeter = greeter; |
| 176 | + } |
| 177 | + } |
| 178 | + ``` |
| 179 | + |
| 180 | + |
| 181 | + |
| 182 | + |
| 183 | + |
| 184 | + |
| 185 | + |
| 186 | + .l-sub-section |
| 187 | + h3 changeDetection |
| 188 | + |
| 189 | + |
| 190 | + :markdown |
| 191 | + |
| 192 | + Defines the used change detection strategy. |
| 193 | + |
| 194 | + When a component is instantiated, Angular creates a change detector, which is responsible for |
| 195 | + propagating |
| 196 | + the component's bindings. |
| 197 | + |
| 198 | + The `changeDetection` property defines, whether the change detection will be checked every time |
| 199 | + or only when the component |
| 200 | + tells it to do so. |
| 201 | + |
| 202 | + |
| 203 | + |
| 204 | + |
| 205 | + |
| 206 | + |
| 207 | + |
| 208 | + .l-sub-section |
| 209 | + h3 viewInjector |
| 210 | + |
| 211 | + |
| 212 | + :markdown |
| 213 | + |
| 214 | + Defines the set of injectable objects that are visible to its view dom children. |
| 215 | + |
| 216 | + ## Simple Example |
| 217 | + |
| 218 | + Here is an example of a class that can be injected: |
| 219 | + |
| 220 | + ``` |
| 221 | + class Greeter { |
| 222 | + greet(name:string) { |
| 223 | + return 'Hello ' + name + '!'; |
| 224 | + } |
| 225 | + } |
| 226 | + |
| 227 | + @Directive({ |
| 228 | + selector: 'needs-greeter' |
| 229 | + }) |
| 230 | + class NeedsGreeter { |
| 231 | + greeter:Greeter; |
| 232 | + |
| 233 | + constructor(greeter:Greeter) { |
| 234 | + this.greeter = greeter; |
| 235 | + } |
| 236 | + } |
| 237 | + |
| 238 | + @Component({ |
| 239 | + selector: 'greet', |
| 240 | + viewInjector: [ |
| 241 | + Greeter |
| 242 | + ] |
| 243 | + }) |
| 244 | + @View({ |
| 245 | + template: `<needs-greeter></needs-greeter>`, |
| 246 | + directives: [NeedsGreeter] |
| 247 | + }) |
| 248 | + class HelloWorld { |
| 249 | + } |
| 250 | + |
| 251 | + ``` |
| 252 | + |
| 253 | + |
| 254 | + |
| 255 | + |
| 256 | + |
| 257 | + |
0 commit comments