angular-docs-cn/public/docs/js/latest/api/annotations/Viewport-class.jade

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