Angular cli 父傳子，子傳父，服務Service， @input,@output，@ViewChild 裝飾器的簡單使用，看這一篇就夠了

天天向上518發表於2024-06-20
AngularView

直接code

1：Angular cli 建立元件component

ng g component components\right

ng g c wave  簡寫

需要定位到根路徑下即可建立元件

Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
PS C:\myAngulrDemos\20240428demo\mydemo01\src> cd ..
PS C:\myAngulrDemos\20240428demo\mydemo01> ng g component components\mynews
CREATE src/app/components/mynews/mynews.component.html (21 bytes)
CREATE src/app/components/mynews/mynews.component.spec.ts (626 bytes)
CREATE src/app/components/mynews/mynews.component.ts (275 bytes)
CREATE src/app/components/mynews/mynews.component.css (0 bytes)
UPDATE src/app/app.module.ts (486 bytes)
PS C:\myAngulrDemos\20240428demo\mydemo01>

2：Angular cli 建立服務 service

ng g service services\mydata
在Angular中，服務是一種可重用的、負責特定任務的獨立功能單元，比如獲取資料、分享資料或者處理業務邏輯等。下面是如何建立和使用服務的步驟，以Angular的最新實踐為準：

建立服務
1:使用 @Injectable 裝飾器： 所有的服務都需要使用 @Injectable() 裝飾器來標記，這允許Angular的依賴注入系統識別並使用這個服務,下面為ts code:
 import { Injectable } from '@angular/core';

   @Injectable({
     providedIn: 'root', // 這使得服務成為一個單例，並在根模組級別提供
   })
   export class MyService {
     constructor() { }

     // 服務方法示例
     getData(): any {
       // 實現資料獲取邏輯
     }
   }

2:提供服務： 在上面的例子中，我們使用了 providedIn: 'root'，這意味著服務會在根模組級別被提供，並且在整個應用程式中作為單例存在。如果你希望更細粒度地控制服務的生命週期，可以在模組的 providers 陣列中宣告服務。


使用服務Service
2.1:注入服務： 要在元件、指令或其他服務中使用服務，你需要將其注入到建構函式中 ,下面為ts 
   import { Component } from '@angular/core';
   import { MyService } from './my.service';

   @Component({
     selector: 'app-my-component',
     template: `
       <p>{{data}}</p>
     `,
   })
   export class MyComponent {
     data: any;

     constructor(private myService: MyService) { }

     ngOnInit() {
       this.data = this.myService.getData();
     }
   }

3:==== 父傳子 使用 Input 裝飾器

父 app-root：html
<h1>app root元件</h1>
<hr>
<p>引數:ptocback, pfunctionback:函式帶到子元件</p>
<app-myparent [ptoc]="ptocback" [pfunction]="pfunctionback"></app-myparent>  //子元件
<router-outlet></router-outlet>

父：ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'mydemo01';
  ptocback= "你好峰哥："+Date.now().toLocaleString();
  pfunctionback(){
    alert("hello fengge");
  }
}
子：app-myparent   HTML
<p>myparent works!</p>
<h2>來自父元件的引數：{{ptoc}}</h2>
<hr>

<app-mychild></app-mychild>
<button (click)="pfunctionClick()">點選獲取父元件的函式</button>

子：ts
import { Component, OnInit } from '@angular/core';

import { Input } from '@angular/core'; // 使用 input 裝飾器 加 欄位引數來傳值 ，引入


@Component({
  selector: 'app-myparent',
  templateUrl: './myparent.component.html',
  styleUrls: ['./myparent.component.css']
})


export class MyparentComponent implements OnInit {
  @Input() ptoc: any;  //這裡要定義為any才行,接受來自父元件的資料
  @Input() pfunction() { }

  constructor(private data01service: Dataservice01Service) { }
  ngOnInit(): void {}

  pfunctionClick() {
    this.pfunction();
  }

}

4:=====子傳父 使用 ViewChild裝飾器

父 app-myparent：html
<p>myparent works!</p>
<hr>
<app-mychild  #childData></app-mychild>
<button (click)="childDatatoParentClick()">點選獲取子傳父的資料</button>

父：ts
import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';

@Component({
  selector: 'app-myparent',
  templateUrl: './myparent.component.html',
  styleUrls: ['./myparent.component.css']
})

export class MyparentComponent implements OnInit {

  @ViewChild("childData") childata: any;
  getChildData: any="";

  constructor() { }

  ngOnInit(): void {
   
  }
  childDatatoParentClick(){
    this.getChildData = this.childata.cName
    alert("c->p:" + this.getChildData);
  }
}
子 app-mychild：html
<p>mychild works!</p>

子 app-mychild：ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-mychild',
  templateUrl: './mychild.component.html',
  styleUrls: ['./mychild.component.css']
})
export class MychildComponent implements OnInit {

  cName:any;
  constructor() { }

  ngOnInit(): void {
    this.cName = "我是Child元件的資料引數";
  }

}

5:===元件使用Service服務傳值或者獲取資料

1：生成元件的命令 : ng g service services\mydataService01

服務service  ts code
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class Dataservice01Service {

  constructor() { }
 getData(){
   return "this Data from service 01";
 }
}
元件上使用 html
<button (click)="getdata01serverClick()">點選獲取服務上的資料</button>\

元件ts
import { Component, OnInit } from '@angular/core';
import { Dataservice01Service } from 'src/app/services/dataservice01.service'; //引入服務service 
@Component({
  selector: 'app-myparent',
  templateUrl: './myparent.component.html',
  styleUrls: ['./myparent.component.css']
})


export class MyparentComponent implements OnInit {

  constructor(private data01service: Dataservice01Service) { //注入service 服務
  }
  ngOnInit(): void {}

  getdata01serverClick() {
    let ds = this.data01service.getData();
    alert("來自服務的資料：" + ds);
  }

}

6:子傳父 使用 @Output裝飾器

步驟 1: 在子元件中定義輸出屬性

1.1:建立事件發射器: 在子元件類中，使用@Output()裝飾器定義一個事件發射器。通常，我們會使用EventEmitter作為其型別，它能夠發射任何型別的資料,
1.2:在這個例子中，我們定義了一個名為messageEvent的輸出屬性，型別為EventEmitter<string>，意味著它可以發射字串型別的資料

子ts code:
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">傳送訊息給父元件</button>
  `
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit("Hello from Child!");
  }
}

步驟 2: 在父元件模板中繫結事件
2.1:使用事件繫結: 在父元件的HTML模板中，透過事件繫結語法(())將子元件的輸出事件與父元件中的一個方法繫結起來。

<!-- 父元件模板 -->
<app-child (messageEvent)="receiveMessage($event)"></app-child>
<p>{{ receivedMessage }}</p>

步驟 3: 在父元件類中處理事件

3.1:定義處理方法: 在父元件的類中，定義一個方法來接收並處理從子元件傳來的資料
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  receivedMessage: string;

  receiveMessage(message: string) {
    this.receivedMessage = message;
  }
}

7 最後來一張測試截圖

相關文章