[解決済み] Angular2の$document.ready()に相当します。
2022-02-19 03:26:41
質問
シンプルな質問ですね。
Angular2の$document.ready()が実行されたときにスクリプトを実行したいのですが、どうすればいいですか?これを達成するための最良の方法は何ですか?
の末尾にスクリプトを記述してみました。
index.html
しかし、私が発見したように、これはうまくいきません! コンポーネント宣言のようなものに入れる必要があるのでしょうか?
からのスクリプトの読み込みを実行することは可能ですか?
.js
ファイルを作成できますか?
EDIT - コードです。
私は以下のjsとcssのプラグインをアプリケーションに注入しています( Foundry html テーマ ).
<link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
...
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/flexslider.min.js"></script>
...
<script src="js/scripts.js"></script> //This initiates all the plugins
前述の通り、scripts.jsは全体を「インスタンス化」するので、Angularが準備できた後に実行する必要があります。 script.js
動作確認しました。
import {Component, AfterViewInit} from 'angular2/core';
@Component({
selector: 'home',
templateUrl: './components/home/home.html'
})
export class HomeCmp implements AfterViewInit {
ngAfterViewInit() {
//Copy in all the js code from the script.js. Typescript will complain but it works just fine
}
解決方法は?
の中で、自分でイベントを発生させることができます。
ngOnInit()
を作成し、このイベントをAngularの外部でリッスンします。
これはDartのコードだが(TypeScriptは知らない)、翻訳するのはそれほど難しくないはずだ。
@Component(selector: 'app-element')
@View(
templateUrl: 'app_element.html',
)
class AppElement implements OnInit {
ElementRef elementRef;
AppElement(this.elementRef);
void ngOnInit() {
DOM.dispatchEvent(elementRef.nativeElement, new CustomEvent('angular-ready'));
}
}
関連
-
[解決済み】Angular2 CLI エラー "@angular/compiler-cli" パッケージが正しくインストールされていません。
-
[解決済み】angularでpreflightのレスポンスがHTTP okステータスにならない。
-
[解決済み] angularでpreflightのレスポンスがHTTP okステータスにならない
-
[解決済み] LegendItemComponent をカスタマイズする Angular 用 kendo-ui
-
[解決済み] イオン4オブザーバブル
-
[解決済み] ウェブストーム Must be lvalue」の意味するところ
-
[解決済み] パーサエラーです。式が期待される場所で補間({{}})を得た
-
[解決済み] Angular 6 Error trying to diff '[object Object]'. 配列と反復記号のみが許可されます。
-
[解決済み] Angular 4 - "BrowserAnimationsModule "または "NoopAnimationsModule "のいずれかをアプリケーションに組み込んでください。
-
[解決済み] Angular 2+でngShowとngHideに相当するものは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】angular 4アプリにReactiveFormsModuleを追加すると、NgControl用のプロバイダがないエラーが発生する。
-
[解決済み】Angularで実際のエラーメッセージの代わりに「Http failure response for (unknown url): 0 Unknown Error」が表示されるのですが。
-
[解決済み】Angular2 CLI エラー "@angular/compiler-cli" パッケージが正しくインストールされていません。
-
[解決済み】Angular2エラー。exportAs "が "ngForm "に設定されたディレクティブは存在しません。
-
[解決済み】「ルーターリンク」は既知のプロパティではないため、バインドできない
-
[解決済み] Angular EXCEPTION: Http用のプロバイダがありません。
-
[解決済み] Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'.
-
[解決済み] エラーです。複数のモジュールがマッチしました。skip-import オプションを使用して、最も近いモジュールへのコンポーネントのインポートをスキップしてください。
-
[解決済み] Angular CLIでピア依存をインストールする場合の対処方法は?
-
[解決済み] AngularのmatSortがソートされない