angular依赖注入

1.angular依赖注入

1.创建服务

2.在ngmodule内引入

3.使用

https://www.angular.cn/guide/architecture-services

2.http服务


https://www.angular.cn/guide/http

3.RX的简单应用



https://www.angular.cn/guide/rx-library

2.组件之间的传值

1.modal


2.父组件 - >子组件

  1. <!-- 父组件html -->
  2. <!-- 将userName的值通过[name]属性传给子组件 -->
  3. <app-child [name]='userName'></app-child>
  1. //父组件ts
  2. //要传的数据userName
  3. userName = 'user1';
  1. //子组件ts
  2. import { Component,OnInit,Input, Output, EventEmitter} from '@angular/core';
  3. @Component({
  4. selector: 'app-child',
  5. templateUrl: './app-child.component.html'
  6. })
  7. export class AppChildComponent implements OnInit {
  8. @Input() name:string;
  9. ngOnInit() {
  10. console.log(this.name) //'user1'
  11. }
  12. }

3.子组件- >组件父
方法一:(子组件加上属性标记,只能在HTML中使用,TS中无效)。

  1. //子组件ts 定义子组件属性newName 和方法getName()
  2. newName = 'newName';
  3. getName(){
  4. console.log('get it',this.newName);
  5. }
  1. <!-- 父组件html 访问子组件属性和方法 -->
  2. <app-child #child></app-child>
  3. {{child.newName}}
  4. <button (click)="child.getName()">点击</button>

方法二:(使用@ViewChild

  1. //父组件ts
  2. import { Component, OnInit, ViewChild} from '@angular/core';
  3. //引入子组件
  4. import { AppChildComponent } from './components/app-child/app-child.component';
  5. export class AppFatherComponent implements OnInit {
  6. @ViewChild(AppChildComponent)
  7. child:AppChildComponent
  8. ngOnInit() {
  9. console.log(this.child.newName)
  10. }
  11. }

方法三:

  1. //父组件ts
  2. //引入子组件
  3. import { AppChildComponent } from './components/app-child/app-child.component';
  4. export class AppFatherComponent implements OnInit {
  5. constructor(private appChildComponent :AppChildComponent )
  6. ngOnInit() {
  7. console.log(this.appChildComponent.newName)
  8. }
  9. }
  10. //父组件app.father.module.ts import子组件
  11. @NgModule({
  12. declarations: [
  13. AppFatherComponent,
  14. AppChildComponent
  15. ],
  16. imports: [
  17. AppChildComponent // ************需要导入
  18. ]
  19. })

参考:https//blog.csdn.net/qq_43225030/article/details/84650448


转载声明:本文为博林网-IT技术分享的原创文章,转载请注明原文地址,谢谢合作

发表评论: