角度2 - すべての角2 APIのアニメーションの例では、セレクタ

Question

上で直接アニメーションハンドラを追加し、アニメーションのハンドラはinnerHTMLプロパティ、私はコンポーネントセレクタに直接それを置くしたい

に実装されています。以下の例では

、[@visibility]="visibility"はdivタグにあるが、私はselector: 'vps-node'でそれをしたいので、私のテンプレートが

@Component({ 
selector: 'vps-node', 
template: `<div [@visibility]="visibility"><ng-content></ng-content></div>`, 
animations: [ 
    trigger('visibility', [ 
     state('in', style({ transform: 'translateX(0)' })), 
     transition('void => *', [ 
      animate(300, keyframes([ 
       style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }), 
       style({ opacity: 1, transform: 'translateX(15px)', offset: 0.3 }), 
       style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }) 
      ])) 
     ]), 
     transition('* => void', [ 
      animate(300, keyframes([ 
       style({ opacity: 1, transform: 'translateX(0)', offset: 0 }), 
       style({ opacity: 1, transform: 'translateX(-15px)', offset: 0.7 }), 
       style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 }) 
      ])) 
     ]) 
    ]) 
    ] 
}) 

Answer 1

は、私がこの私を共有しようと思いました親divタグから単に<ng-content>でありますホスト要素上でアニメーショントリガーを作成することができました。

ページ遷移を処理する次のコードを確認してください。

@Component({ 
    selector: 'styles', 
    templateUrl: './styles.template.html', 
    host: { 
     '(@routeAnimation.start)': 'pageEnterStarted($event)', 
     '(@routeAnimation.done)': 'pageEnterCompleted($event)', 
     '[@routeAnimation]': 'true', 
    }, 
    animations: [ 
     trigger('routeAnimation', [ 
      state('*', style({ opacity: 1})), 
      transition('void => *', [ 
       style({ opacity: 0}), 
       animate(250) 
      ]), 
      transition('* => void', animate(250, style({opacity: 0}))) 
     ]) 
    ] 
}) 
export class StylesComponent { 
    pageEnterStarted() { 
    } 

    pageEnterCompleted() { 
    } 
} 

Answer 2

大括弧で囲む必要があるhost：プロパティが表示されます。

ホスト：{ '[ @visibility ]'： '可視'}、

selector: 'vps-row-node', 
host: { '[@visibility]': 'visibility' }, 
template: `<ng-content></ng-content>`, 
animations: [...]