基本的に、コンポーネントhtml固有のスクリプトファイルをロードしたかったので、コンポーネントhtml自体の中scriptにscriptファイル参照を配置scriptします。ページでコンポーネントhtmlをレンダリングするときに、内部ファイルが無視されていることがわかります。
成分
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'test.html'
})
export class AppComponent { }
test.html
<div>
<h1>My First Angular 2 App</h1>
</div>
<script src="test.js"></script>
上記は私が試した私のコードでtest.jsあり、私はすでにそこに配置されています。
コンポーネントまたはそのhtmlを使用してコンポーネント固有のjavascriptファイルをロードする方法はありますか？
AngularがHtmlテンプレートからスクリプトタグを取り出しているようです。
Angular Docsから：
<script>タグを削除しますが、<script>タグのテキストコンテンツなどの安全なコンテンツを保持します
Angularはセキュリティをバイパスする方法を提供しますが、あなたのユースケースではサービスが役立つように見えます。
別の専用ファイルからコンポーネントに独自のカスタムスクリプトを含めるための推奨される方法は、サービスを作成することです。
Plunkerのscript.jsファイルからコードを取得し、次のようなサービスに配置しました。
// File: app/test.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class TestService {
testFunction() {
console.log('Test');
}
}
次に、サービスをインポートして、次のようにカスタムコードを呼び出しました。
// File: app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { TestService } from './test.service';
@Component({
selector: 'my-app',
templateUrl: 'test.html',
providers: [TestService]
})
export class AppComponent implements OnInit {
constructor(private testService: TestService) {}
ngOnInit() {
this.testService.testFunction();
}
}
特定の時点でサービスのカスタムコードを呼び出したい場合は、ライフサイクルフックを利用できます。たとえば、ビューが読み込まれるまで待つのngAfterViewInit()ではなく、を使用してコードを呼び出すことができますngOnInit()。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加