2
私は初心者のプログラマーです。最近、角度4を学び始めました。私は個人的なサイトを作ろうとしており、アニメーションを追加したいと思っています。角2+アニメーション - 身体要素の色を変更する
ページの上部には、ロゴ付きのジャンボトロンがあります。私はこのロゴをクリックすると、ボディの背景色が変わるようにしたいのですが、この関数がその要素をトリガーしているようです。ここで
は、活字体に私のコードです：（。。コードがエラーを生成しませんそれはちょうど私が何を意図したもの行いません）
@Component({
selector: 'main-jumbotron',
templateUrl: './jumbotron.component.html',
styleUrls: ['./jumbotron.component.css'],
animations: [
trigger("changeBodyColor", [
state('off', style({
backgroundColor: '#CCFFCC'
})),
state('on', style({
backgroundColor: '#3A3A38'
})),
transition('off => on', [animate('2s')]),
transition('on => off', [animate('2s')])
])
]
})
export class JumbotronComponent implements OnInit {
// other private instance data, constructor here, ngOnInit etc.
colorState: string = 'off';
toggleColor() {
console.log('triggered ' + this.colorState);
this.colorState = (this.colorState === 'off') ? 'on' : 'off';
}
}
私は[@changeBodyColor] = "colorStateを置くときジャンボトロンのdiv要素では、アニメーションは動作しますが、ジャンボトロンの背景色を変更するだけです。これをindex.htmlのbody要素に置くと、その関数が（コンソールにログオンして）トリガーされますが、色は変わりません。
私はこれがDOM階層の問題だと思います。誰かが問題の原因を知っていれば、教えてください！
index.htmlがあなたのHTMLテンプレートではないからですか？私が知っている限り、あなたはindex.htmlのコントローラを持っていません。 – trichetriche
はい、しかし、私はどのように身体の要素に到達することができますかと思います。私は子供から親に到達しようとしているので、これは奇妙です。 –
ボディをアニメーション化したい場合は、角度を使用する代わりに手動で行う必要があります。 – trichetriche