Получение -2 Angular8 первая страница

Узнайте больше языков программирования, существует относительно большое преимущество состоит в том, что вы можете полагаться на догадки в начале, пример строительства фестиваля фантазии

Информация Официальный сайт

https://angular.io/guide/architecture-components

1, начальная позиция

 

 

 2, AppComponent

 

 

 HTML и менее являются страницы и стиль

3, app.component.html

Пустой промежуточный следующим

 

 

 Добавить HelloWorld

< DIV класс = "заголовок" > HelloWorld </ DIV >

 

 

 

 Увеличение в последующие годы меньше

 

 

 Вслед за изменением цвета

 

 

 4, в другой редакции

Изменить I: \ Угловая \ ngstudy \ SRC \ приложение \ app.component.ts следующим

импорта {Компонент} от «@ угловая / сердцевина»; 

@Component ({ 
  селектор: 'приложение-корень', 
  templateUrl: './app.component.html', 
  styleUrls: [»./app.component.less'], 
}) 
экспорта класс AppComponent { 
  название = 'ngstudy'; Информация = «привет мира1»; 
}
  

HTML содержание следует

<div class="header">{{info}}</div>

<router-outlet></router-outlet>

运行正常

 

 5、下面搞一个点击事件试试，修改html和component代码如下

<div class="header" (click)="test()">{{info}}</div>

<router-outlet></router-outlet>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
  
})
export class AppComponent {
  title = 'ngstudy';
  info="hello world1";
  test() {
    this.info="hello world2";
  } 
}

点击helloworld1,

 

 运行成功，注意(click)不要写成ng-click,感觉挺简单的。。