4

角度プロジェクト内で可能な限り単純な角度要素があります。次のように、角度要素に属するコンポーネントでエラーをスローします。

dashboard-tile.component.tsユーザー<dashboard-tile a="100" b="50" c="25"></dashboard-tile>( index.htmlの場合)

ngOnInit() {
    throw "this is an error";
  }

しかし、Chrome コンソールにエラーは表示されません。誰かがアドバイスできますか？

ビデオへのリンク。コードを含むgithub リポジトリへのリンク。

編集：

テスト:

  1. クロムとファイアフォックスでテストしました。両方で再現可能です。
  2. 上記のコンポーネントを通常のコンポーネント（<app-dashboard-tile><app-dashboard-tile/>にあるapp.component.ts）のように扱うと、コンソールに例外が表示されます

注:

  1. この質問は角度要素に関するものであり、通常の角度プロジェクトに関するものではありません。これを見落とすのは簡単です。

  2. プロジェクトをクローンしてローカルで実行できれば素晴らしいことです。2分以上かかることはありません。

4

2 に答える 2

10

私はあなたが見ていた問題を再現することができましたcreateCustomElement().'@angular/elements'から使用するときにエラーをスローしたときにのみ発生するようです.

リポジトリ<dashboard-tile>では、index.htmlファイルにロードしています。これは の外側に要素をロードしている<app-root>ため、 を抑制していthrow new Errors("error")ます。

Angular が登録される前にngOnInit()DOM が要素をロードしているため、関数プロパティではないと思います。<dashboard-tile>

app.component.htmlに要素をロードすると<dashboard-tile a="100" b="50" c="25"></dashboard-tile>、エラーが表示されます。

PR とレポを参照してください:リンク

index.htmlで呼び出す必要がある場合は、次のことをお勧めします。

  1. 使ってみてconsole.error("error")

  2. ErrorHandlerを実装する(@angular/core)

更新された dashboard-tile.component.ts:

import {Component, Input, OnInit, ErrorHandler} from '@angular/core';

@Component({
  selector: 'app-dashboard-tile',
  templateUrl: './dashboard-tile.component.html',
  styleUrls: ['./dashboard-tile.component.scss']
})
export class DashboardTileComponent implements OnInit, ErrorHandler {

  @Input() a: number;
  @Input() b: number;
  @Input() c: number;

  constructor() { }

  ngOnInit() {
    debugger;
    this.handleError(new Error('This is Angular Element Error'));
  }

  handleError(err: any): void {
    console.error(err);
  }

}
于 2019-03-10T21:24:50.263 に答える