angular: кнопка не влияет на клик

Question

Это пример hello-world на странице Angular: https://angular.io/start#create -a-new-project

Я точно следовал инструкции. Но Notify Me не имеет оповещения о клике.

Что-то не хватает в руководстве?

Вы также можете найти полный исходный код здесь: https://github.com/chakpongchung/angular-5ejvpx

Интересно, есть ли способ показать собранный html из Angular проекта. Таким образом, я могу сказать, как все компоненты и маршрутизаторы объединены в один или несколько простых html. Таким образом, это может быть лучшим способом отладки.

Answer 1

У вас есть ошибка в вашем product-list.component. html:

  <app-product-alerts
    [product]="product"> <-- delete this ">" closing tag
    (notify)="onNotify()">
  </app-product-alerts>

ОБНОВЛЕНИЕ

Вы можете сделать что-то подобное, но так как Angular не собирает html напрямую, результат немного другой. Это JS.

Сначала добавьте это в ваш пакет. json Раздел "скрипты":

"compile": "ngc",

Теперь давайте запустим его из терминала с помощью:

npm run compile

вы получите папку "dist / out-ts c" с большим количеством файлов. Это результаты преобразования html файлов в js.

Интересная часть - ваша product-list.component.html. Найдите product-list.component.js

function ProductListComponent_div_2_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵelementStart(1, "h3");
    i0.ɵɵelementStart(2, "a", 1);
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(4, ProductListComponent_div_2_p_4_Template, 2, 1, "p", 2);
    i0.ɵɵelementStart(5, "button", 3);
    i0.ɵɵlistener("click", function ProductListComponent_div_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return ctx_r4.share(); });
    i0.ɵɵtext(6, " Share ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "app-product-alerts", 4);
    i0.ɵɵtext(8, " (notify)=\"onNotify()\"> ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();

Теперь посмотрим разницу при удалении закрывающего тега:

function ProductListComponent_div_2_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵelementStart(1, "h3");
    i0.ɵɵelementStart(2, "a", 1);
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(4, ProductListComponent_div_2_p_4_Template, 2, 1, "p", 2);
    i0.ɵɵelementStart(5, "button", 3);
    i0.ɵɵlistener("click", function ProductListComponent_div_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return ctx_r4.share(); });
    i0.ɵɵtext(6, " Share ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "app-product-alerts", 4);
    i0.ɵɵlistener("notify", function ProductListComponent_div_2_Template_app_product_alerts_notify_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(); return ctx_r6.onNotify(); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();

Суммируем:

с ошибкой:

i0.ɵɵtext(8, " (notify)=\"onNotify()\"> ");

и правильный:

i0.ɵɵlistener("notify", function ProductListComponent_div_2_Template_app_product_alerts_notify_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r6 = i0.ɵɵnextContext(); return ctx_r6.onNotify(); });