Angular 5 удаляет (щелчок) событие в HTML - PullRequest
Новая
       29

Angular 5 удаляет (щелчок) событие в HTML

0 голосов
/ 17 декабря 2018

Итак, у меня есть этот код: 

<a type="button" class="btn btn-sm btn-primary btn-link" (click)="show = !show">Toggle</a>

, но когда код отображается, HTML выглядит так, как это выглядит в консоли разработчика 

<a _ngcontent-c5="" class="btn btn-sm btn-primary btn-link" type="button">Toggle</a>

Я пробовал каккнопка, и вот что я получаю ... 

<button _ngcontent-c5="" class="btn btn-sm btn-primary btn-link" type="button">Toggle</button>

Мысли о том, почему это происходит?

Код от этой ссылки на Stackblitz - вот что я использую:

https://stackblitz.com/edit/minimum-angular-code-for-a-transition?file=src%2Fapp%2Fapp.component.html

Вот мои настройки: 

Angular CLI: 1.7.4
Node: 8.11.1
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.2.4
@angular/cli: 1.7.4
@angular/language-service: 4.4.7
@angular/material: 5.2.5
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

ОБНОВЛЕНИЕ

Я написал функцию, которая работает, но я 'я получаю неопределенное ... вот мини-версия кода, начиная с верхней части моего .ts файла:

HTML 

<button type="button" class="btn btn-sm btn-primary btn-link" (click)="showHidePaperroll(false)">Toggle</button>

.TSФАЙЛ

Это начало в конструкторе () {} 

public thePaperRoll: HTMLElement;

ngAfterViewInit() {
    this.thePaperRoll = document.querySelector(".box") as HTMLElement;
}


showHidePaperroll(what: boolean) {
    console.log("In Show Hide paperroll");
    let paperBox: any = "";
    paperBox = document.getElementById(".box") as HTMLImageElement;

    if (what === false) {
      paperBox = this.thePaperRoll.style.opened;
      console.log("PaperBox: ", paperBox);
    } else {
      paperBox = this.thePaperRoll.style.opened;
      console.log("PaperBox: ", paperBox);
    }

}

CSS 

.box {
  background-color: #FFCC55;
  max-height: 0px;
  overflow-y: hidden;
  transition: ease-in-out 500ms max-height;
}

.box.opened {
  max-height: 500px;
  transition: ease-in-out 700ms max-height;
}
...