123 lines
3.4 KiB
Plaintext
123 lines
3.4 KiB
Plaintext
|
|
p.
|
|
<span class="location-badge">exported from <a href="/angular2/annotations">angular2/annotations</a></span>
|
|
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L884">angular2/src/core/annotations/annotations.js (line 884)</a>
|
|
|
|
:markdown
|
|
Directive that controls the instantiation, destruction, and positioning of inline template elements.
|
|
|
|
A viewport directive uses a <a href="angular2/view/ViewContainer-class"><code>ViewContainer</code></a> to instantiate, insert, move, and destroy views at runtime.
|
|
The <a href="angular2/view/ViewContainer-class"><code>ViewContainer</code></a> is created as a result of `<template>` element, and represents a location in the current view
|
|
where these actions are performed.
|
|
|
|
Views are always created as children of the current <a href="angular2/annotations/View-class"><code>View</code></a>, and as siblings of the `<template>` element. Thus a
|
|
directive in a child view cannot inject the viewport directive that created it.
|
|
|
|
Since viewport directives are common in Angular, and using the full `<template>` element syntax is wordy, Angular
|
|
also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are equivalent.
|
|
|
|
Thus,
|
|
|
|
```
|
|
<ul>
|
|
<li *foo="bar" title="text"></li>
|
|
</ul>
|
|
```
|
|
|
|
Expands in use to:
|
|
|
|
```
|
|
<ul>
|
|
<template [foo]="bar">
|
|
<li title="text"></li>
|
|
</template>
|
|
</ul>
|
|
```
|
|
|
|
Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the `Viewport`
|
|
controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
|
|
|
|
|
|
## Example
|
|
|
|
Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
|
|
|
|
Here is a simple viewport directive that triggers on an `unless` selector:
|
|
|
|
```
|
|
@Viewport({
|
|
selector: '[unless]',
|
|
properties: {
|
|
'unless': 'unless'
|
|
}
|
|
})
|
|
export class Unless {
|
|
viewContainer: ViewContainer;
|
|
prevCondition: boolean;
|
|
|
|
constructor(viewContainer: ViewContainer) {
|
|
this.viewContainer = viewContainer;
|
|
this.prevCondition = null;
|
|
}
|
|
|
|
set unless(newCondition) {
|
|
if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
|
|
this.prevCondition = true;
|
|
this.viewContainer.clear();
|
|
} else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
|
|
this.prevCondition = false;
|
|
this.viewContainer.create();
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
We can then use this `unless` selector in a template:
|
|
```
|
|
<ul>
|
|
<li *unless="expr"></li>
|
|
</ul>
|
|
```
|
|
|
|
Once the viewport instantiates the child view, the shorthand notation for the template expands and the result is:
|
|
|
|
```
|
|
<ul>
|
|
<template [unless]="exp">
|
|
<li></li>
|
|
</template>
|
|
<li></li>
|
|
</ul>
|
|
```
|
|
|
|
Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
|
|
view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
|
|
|
|
|
|
.l-main-section
|
|
h2 Members
|
|
.l-sub-section
|
|
h3 constructor
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
constructor({
|
|
selector,
|
|
properties,
|
|
events,
|
|
hostListeners,
|
|
lifecycle
|
|
}:{
|
|
selector:string,
|
|
properties:any,
|
|
events:List,
|
|
lifecycle:List
|
|
}={})
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|