精华内容
参与话题
问答
  • 1.创建 Angular 组件 创建组件 ng g component components/header 使用组件 <app-header></app-header> ## Angular 绑定数据 数据文本绑定 {{ }} 绑定 ...

    1.创建 Angular 组件

    • 创建组件
    ng g component components/header
    
    • 使用组件
    <app-header></app-header>
    

    2.Angular 绑定数据

    • 数据文本绑定 {{ }}
      在这里插入图片描述

    • 绑定 html
      在这里插入图片描述

    • 绑定属性
      在这里插入图片描述

    3.数据循环 *ngFor

    • *ngFor 普通循环

      <ul>
      	<li *ngFor="let item of list">
      		{{item}}
      	</li>
      </ul>
      
    • 循环的时候设置 key

      <ul>
      	<li *ngFor="let item of list;let i = index;">
      		{{item}} --{{i}}
      	</li>
      </ul>
      

    4.条件判断 *ngIf

    <p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>
    

    5.*ngSwitch

    <ul [ngSwitch]="score">
    	<li *ngSwitchCase="1">已支付</li>
    	<li *ngSwitchCase="2">订单已经确认</li>
    	<li *ngSwitchCase="3">已发货</li>
    	<li *ngSwitchDefault>无效</li>
    </ul>
    

    6.执行事件

    <button class="button" (click)="getData()">
    	点击按钮触发事件
    </button>
    <button class="button" (click)="setData()">
    	点击按钮设置数据
    </button>
    
    getData(){ /*自定义方法获取数据*/
    	//获取
    	alert(this.msg);
    }
    setData(){
    	//设置值
    	this.msg='这是设置的值';
    }
    

    7.表单事件

    <input type="text" (keyup)="keyUpFn($event)"/>
    
    keyUpFn(e){
    	console.log(e)
    }
    

    8.双向数据绑定

    • 首先引入 FormModule

      ... // 省略其他引入
      import { FormsModule } from '@angular/forms';
      
      @NgModule({
      declarations: [
      	AppComponent,
      	HeaderComponent,
      	FooterComponent,
      	NewsComponent
      ],
      imports: [
      	BrowserModule,
      	FormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
      })
      export class AppModule { }
      
    • 使用

      <input type="text" [(ngModel)]="inputValue"/> {{inputValue}}
      

    9.[ngClass]、[ngStyle]

    • [ngClass]

      <div [ngClass]="{'red': true, 'blue': false}">
      	这是一个 div
      </div>
      
      <!-- public flag=false; -->
      <div [ngClass]="{'red': flag, 'blue': !flag}">
      	这是一个 div
      </div>
      
      <!-- public arr = [1, 3, 4, 5, 6]; -->
      <ul>
      	<li *ngFor="let item of arr, let i = index">
      		<span [ngClass]="{'red': i==0}">{{item}}</span>
      	</li>
      </ul>
      
    • [ngStyle]

      <div [ngStyle]="{'background-color': 'green'}">你好 ngStyle</div>
      <!-- public attr='red'; -->
      <div [ngStyle]="{'background-color': attr}">你好 ngStyle</div>
      

    10.管道

    public today=new Date();
    
    <p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
    
    展开全文
  • angular7创建组件

    2019-12-30 20:44:37
    1.两条重要ng命令 ng generate module bootstrap-modal // 创建ng的module模板 ng generate component ...当其他组件想要调用这个新建的组件时,这个组件的module文件需要配置exports import { NgModule } from '@a...

    1.两条重要ng命令

    ng generate module bootstrap-modal   // 创建ng的module模板
    ng generate component bootstrap-modal // 创建ng的组件模板
    

    2.配置exports
    当其他组件想要调用这个新建的组件时,这个组件的module文件需要配置exports

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { BootstrapModalComponent } from './bootstrap-modal.component';
    
    
    
    @NgModule({
      declarations: [BootstrapModalComponent],
      imports: [
        CommonModule
      ],
      exports: [BootstrapModalComponent],  // 这里是新增的代码段
    })
    export class BootstrapModalModule { }
    

    3.父组件也需要配置相应的imports代码段

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
    import { ModalModule } from 'ngx-bootstrap/modal';
    import { ButtonsModule } from 'ngx-bootstrap/buttons';
    
    import { MainComponent } from './main-layout/main.component';
    import { RouterModule } from '@angular/router';
    import {SidebarComponent} from './sidebar/sidebar.component';
    import {HeaderComponent} from './header/header.component';
    import {NavigationModule} from '../navigation/navigation.module';
    import {LoginLayoutComponent} from './login-layout/login-layout.component';
    import {BootstrapModalModule} from '../components/bootstrap-modal/bootstrap-modal.module'; // 新增代码
    
    export const COMPONENTS = [MainComponent, LoginLayoutComponent, SidebarComponent, HeaderComponent];
    
    @NgModule({
      declarations: [...COMPONENTS],
      imports: [
        CommonModule,
        RouterModule,
        BsDropdownModule,
        ModalModule,
        ButtonsModule,
        NavigationModule,
        BootstrapModalModule // 新增代码段
      ],
      exports: [...COMPONENTS],
      entryComponents: []
    })
    export class LayoutModule { }
    
    

    4.在父组件调用

      <app-bootstrap-modal></app-bootstrap-modal>
    
    展开全文
  • angular7组件向父组件传值

    千次阅读 2019-08-16 14:21:27
    组件设置@Output()发送事件给父组件 @Output() // @Output('value4toFatherValue')可以将父组件捕获的子组件的事件名称改为括号内的 value4: EventEmitter <any> = new EventEmitter(); value5 = 1111....

    子组件设置@Output()发送事件给父组件

    @Output()

    // @Output('value4toFatherValue')可以将父组件捕获的子组件的事件名称改为括号内的

    value4: EventEmitter <any> = new EventEmitter();

    value5 = 1111.22222;// 在子组件中定义的一个值

    //子组件的点击事件

    <button (click)="sendToFather()">按钮</button>

    //子组件将值发给父组件

    public sendToFather() {

    // 将值发送给父组件

    this.value4.emit(this.value5);

    }

    //在父组件中引用子组件  

    <app-child-child (value4)="formChildValue($event)"></app-child-child>

    //实现formChildValue方法  子发给父亲的

    public formChildValue(event: number) {

    this.studentValue = event;

    }

    //父组件可以在方法中对子组件的值进行操作

    展开全文
  • 1.新建子组件 app-child 2.在父组件中引用子组件 <app-child[value1]="fatherValue"></app-child> 2.在子组件中使用@Input接受父组件传的值 @Input() value1: string; value1就是父组件传到子组件...

    1.新建子组件

    app-child

    2.在父组件中引用子组件

    <app-child [value1]="fatherValue"></app-child>

    2.在子组件中使用@Input接受父组件传的值
    @Input()

    value1: string;

    value1就是父组件传到子组件的值了,可以在子组件中去使用

    展开全文
  • 111
  • Angular7父子组件以及父子组件之间的通信 父组件给子组件传值-@input 先在父组件ts中定义一个属性 public title: string = '我是首页组件的标题'; 在父组件html页面元素中绑定属性 <app-header [title]=...
  • Angular8视频教程-IT营配套笔记如下(参考自大地老师): 一、父组件给子组件传值-@input 父组件不仅可以给子组件传递简单的数据,还可把自己的方法以及整个父组件传给子组件。 1. 父组件调用子组件的时候传入数据 ...

空空如也

1 2 3 4 5 ... 16
收藏数 317
精华内容 126
关键字:

angular7组件