真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Angular表單、管道、綁定、指令、通信和周期源碼分析

這篇文章主要介紹了Angular表單、管道、綁定、指令、通信和周期源碼分析的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Angular表單、管道、綁定、指令、通信和周期源碼分析文章都會有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)公司專注于新密企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,成都商城網(wǎng)站開發(fā)。新密網(wǎng)站建設(shè)公司,為新密等地區(qū)提供建站服務(wù)。全流程按需設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

1 Angular的兩大表單

1.1 模板驅(qū)動表單

模板驅(qū)動表單：引入FormsModule模塊，表單的控制邏輯都是寫在模板里的，每一個表單元素都是和一個負責(zé)管理內(nèi)部表單模型的指令關(guān)聯(lián)起來的。

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-module-form',
  template:`
  
    
        最少2個字符
        最多6個字符
                     提交      `,   styleUrls: ['./module-form.component.less'] }) export class ModuleFormComponent implements OnInit {   constructor() { }   ngOnInit() {   }   OnSubmit(moduleForm:NgForm){     console.log(moduleForm.value);   } }

1.2 響應(yīng)式表單

響應(yīng)式表單：需要引入ReactiveFormsModule模塊，在響應(yīng)式表單中，視圖中的每個表單元素都直接鏈接到一個表單模型。



//原始的定義方法
export class ReactiveRegistComponent implements OnInit {
  formModel:FormGroup;
  constructor() {
    this.formModel=new FormGroup({
      username:new FormControl(),
      mobile:new FormControl(),
      passwordsGroup: new FormGroup({
        password:new FormControl(),
        pconfirm:new FormControl(),
      })
    });
  }
}

//使用formBuilder后的定義
constructor(fb:FormBuilder) {
  this.formModel=fb.group({
    username:[''],
    mobile:[''],
    passwordsGroup: fb.group({
      password:[''],
      pconfirm:[''],
    })
  });
}
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';

@Component({
  selector: 'app-module-form',
  // templateUrl: './module-form.component.html',
  template:`
    
    

    
  
  `,
  styleUrls: ['./module-form.component.less']
})
export class ModuleFormComponent implements OnInit {
  form!: FormGroup;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      username:[null,[Validators.required,Validators.maxLength(6)]],
      password:[null,[Validators.required]],
    })
  }
}
export function whiteSpaceValidator(): ValidatorFn {
  // 不能全輸入空格，驗證
  return (control: FormControl): { [s: string]: boolean } => {
    const reg = new RegExp(/\s/g);
    if (reg.test(control.value)) {
      return { required: true };
    }
  };
}

2 Angular管道

2.1 內(nèi)置管道

Angular的一些內(nèi)置管道：如date、uppercase、lowercase、currency、percent等，不用引入，直接在任何組件中使用。注意：用date轉(zhuǎn)化的數(shù)據(jù)不能為字符串，必須為Date類數(shù)據(jù)。




當(dāng)前時間日期為{{curDate|date}}




當(dāng)前時間日期為{{curDate|date:"yyyy/MM/dd"}}





轉(zhuǎn)大寫{{title|uppercase}}



轉(zhuǎn)小寫{{title|lowercase}}




轉(zhuǎn)換金額字符串{{0.259|currency}}




轉(zhuǎn)換金額百分比{{0.259|percent}}

2.2 鏈式管道

鏈式管道：管道以多個條件指定格式輸出。



當(dāng)前時間日期為{{curDate|date:'fullDate'|lowercase}}

2.3 自定義管道

自定義管道：在app.module文件的declarations中進行聲明就可以在任何一個組件中使用了。



600000毫秒真實時間：{{600000|TimeFormater}}
import { PipeTransform, Pipe } from '@angular/core';

@Pipe({
  name: 'TimeFormater',
})
export class TimeFormaterPipe implements PipeTransform {
// // 傳入的是一個一毫秒為單位的時間數(shù)
  transform(value) {
    if (!value || value <= 0) {
      return '00天00時00分00秒';
    }
    const time = Math.abs(value);
    const transecond = Math.round(time / 1000); // 轉(zhuǎn)化為秒
    const day = Math.floor(transecond / 3600 / 24); // 獲取天數(shù)
    const hour = Math.floor((transecond / 3600) % 24); // 獲取小時，取余代表不滿一天那部分
    const minute = Math.floor((transecond / 60) % 60); // 獲取分，取余代表不滿小時那部分
    const second = transecond % 60;
    return `${this.formatTime(day)}天${this.formatTime(hour)}時${this.formatTime(minute)}分${this.formatTime(second)}秒`;
  }

  formatTime(t) {
    return t < 10 ? '0' + t : '' + t;
  }
}

3 Angular的三大綁定

3.1屬性綁定

屬性綁定的屬性指的是元素、組件、指令的屬性。屬性的綁定是單向綁定，從組件的屬性流動到目標(biāo)元素的屬性。

3.2 attribute、class和style綁定

attribute綁定：并非所有屬性都有可供屬性綁定。是HTML標(biāo)簽上的特性，它的值只能夠是字符串。通過attr.特性名綁定。而比如標(biāo)簽中的id、src等這些屬于Property（屬性，DOM中的屬性，是JavaScript里的對象），這些可以直接綁定就可。而attribute綁定如下：


  One-Two
  FiveSix

class的綁定：靜態(tài)綁定、單一屬性動態(tài)綁定方式、多屬性動態(tài)綁定方式、ngCLass指令綁定。

  .test1{
    width: 100px;
    height: 100px;
    border: 1px solid;
  }

  .test2{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
  }

（1）靜態(tài)綁定：可以是一個，也可以是多個，多個的class就會融合起來。

（2）單一屬性動態(tài)綁定方式：取在css文件中定義好的樣式進行綁定，class.樣式的class名。

（3）多屬性動態(tài)綁定方式：class的綁定



moreClass:object = {
    'test1':true,
    'test2':true
}

style的綁定：單一樣式綁定、帶單位的單一樣式綁定、多個樣式綁定。 （1）單一樣式的綁定

（2）帶單位的單一樣式綁定

（3）多個樣式綁定

`綁定多個形式的style
`
moreStyle:string =  'width: 100px;height: 200px';

3.3 事件綁定

事件綁定：帶()的特性就是事件綁定。括號內(nèi)代表的是目標(biāo)事件。而下面例子的事件綁定就是點擊事件的綁定。

（1）目標(biāo)事件是原生DOM元素事件，input是DOM元素input的原生事件。

//html


//js
currentUser={
    'name':''
}
getValue(ev:any){
    this.currentUser.name = ev.target.value;
    console.log(this.currentUser.name);
}

（2）目標(biāo)事件是指令：比如ngClick、ngDblclick等。

（3）目標(biāo)事件是自定義事件。目標(biāo)事件 (子組件的EventEmitter實例變量)="父組件的方法(子組件數(shù)據(jù))"下文的父子組件通信已經(jīng)有詳解。

4 Angular的三大指令

4.1 屬性型指令

屬性型指令：該指令可改變元素、組件或其他指令的外觀和行為。比如：

看一下指令
// Directive:在declarations
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(el:ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}
import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el:ElementRef) {
  }
  
  // 監(jiān)聽鼠標(biāo)懸浮背景顏色設(shè)置
  @HostListener('mouseenter') onMouseEnter(){
    this.hightlight('yellow');
  }
  // 監(jiān)聽鼠標(biāo)離開背景顏色設(shè)置
  @HostListener('mouseleave') onMouseLeave(){
    this.hightlight('');
  }

  private hightlight(color:string){
    this.el.nativeElement.style.backgroundColor = color;
  }
}

4.2 結(jié)構(gòu)型指令

結(jié)構(gòu)型指令：該指令通過添加或移除DOM元素來改變DOM布局。每一個宿主元素都只能有一個結(jié)構(gòu)型指令。比如ngif和ngfor不能在同一元素出現(xiàn)。如ngif、ngfor、ngSwitch（本身是屬性型指令，它控制了兩個結(jié)構(gòu)型指令ngSwitchCase和ngSwitchDefault），結(jié)構(gòu)型指令一般都是帶***符號的**。

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appTagdisplay]'
})
export class TagdisplayDirective {
  private hasView = false;
  // ViewContainerRef訪問視圖容器
  constructor(private templateRef:TemplateRef,private viewContainer:ViewContainerRef) { }

  @Input() set appTagdisplay(condition:boolean){
    if(!condition&&!this.hasView){
      // 視圖容器創(chuàng)建一個內(nèi)嵌的視圖
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    }else if(condition&&this.hasView){
      // 清除該容器，銷毀該視圖
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

  
自定義結(jié)構(gòu)指令

  
    該段顯示，因為appTagdisplay為false
  

  
    該段不顯示，因為appTagdisplay為true
  

4.3 組件

組件：也是一種指令，該指令擁有模板。

5 Angular的五大組件通信

5.1 Input與Output實現(xiàn)父子組件通信

通過下面的例子我們會發(fā)現(xiàn)Input和Output的操作都在子組件中。父傳子：在父組件中動態(tài)綁定屬性，在子組件中Input獲取父組件傳來的屬性。子傳父：子組件創(chuàng)建一個實例化EventEmitter對象，EventEmitter 的核心就是事件觸發(fā)與事件監(jiān)聽器功能的封裝；父組件：通過事件綁定調(diào)用帶參自定義函數(shù)接受子組件傳來的數(shù)據(jù)（自定義函數(shù)的參數(shù)）。

父組件：雙向綁定fatherData也就是當(dāng)前輸入框輸入的信息，點擊發(fā)送事件觸發(fā)傳給子組件的currentData添加數(shù)據(jù)并清空當(dāng)前輸入框的信息。


  
    
      
      {{item}}
    
    
    
      
      發(fā)送
      清空記錄
    
  
  

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

export class FatherComponent implements OnInit {
  isClear:boolean=false;
  fatherData:any;
  currentData:Array=[];
  constructor() { }

  ngOnInit() {
    this.fatherData = this.currentData;
  }

  send(){
    this.currentData.push("我是父組件的數(shù)據(jù)："+this.fatherData);
    this.fatherData='';
  }

  getSonInfo(event:any){
    this.currentData.push("我是子組件的數(shù)據(jù)："+event);
  }
}

子組件：輸入框輸入sonData，點擊發(fā)送事件觸發(fā)子組件事件發(fā)射數(shù)據(jù)，然后父組件就可以通過子組件綁定的事件發(fā)射從父組件通過事件方法獲取當(dāng)前子組件發(fā)送的數(shù)據(jù)。


  
    
    {{item}}
    
  
  
    
    發(fā)送
    清空記錄
  

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

export class SonComponent implements OnInit{
  @Input() dataSource:any=0;
  @Output() sonSend = new EventEmitter();
  isClear:boolean=false;
  sonData:any;
  currentData:Array=[];
  constructor() { }

  ngOnInit(): void {
    this.currentData = this.dataSource;
  }

  send(){
    this.sonSend.emit(this.sonData);
    // this.currentData.push("我是子組件的數(shù)據(jù)："+this.sonData);
    this.sonData='';
  }
}

Angular表單、管道、綁定、指令、通信和周期源碼分析

5.2 通過本地變量實現(xiàn)父子組件的通信

在父組件的模板中創(chuàng)建一個代表子組件的本地變量，通過調(diào)用這個變量就可以調(diào)用子組件中的屬性和方法。

我是父組件


子組件：{{sonTpl.myName}}

5.3 通過@ViewChild實現(xiàn)父子組件的通信

父組件的js中定義@ViewChild(SonComponent) childTpl: any;，注意在html必須要調(diào)用子組件元素，不然會直接報錯，且不能直接調(diào)用childTpl.myName獲取子組件中的變量。

我是父組件

子組件按鈕

// 子組件中的getName
 getName(){
    console.log('我是子組件的getName方法');
 }

5.4 通過共享服務(wù)Service實現(xiàn)非父子組件通信

Service服務(wù)：主要控制準備開始、和確認按鈕的動作進行消息的傳遞。注意這個服務(wù)的定義一定是共享的，不要在各個組件下獨自注入providers中，因為單獨引入service只是在當(dāng)前組件有效，每個組件調(diào)用一次都是獨立的，互不影響，這就不是組件通信需要的。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MissionService {
  // 源
  private missionAnnounceSource = new Subject();
  private misssionConfirmedSource = new Subject();

  // 流
  // asObservable:可觀察的序列，隱藏源序列的身份。
  missionAnnounce$ = this.missionAnnounceSource.asObservable();
  missionConfirm$ = this.misssionConfirmedSource.asObservable();
  constructor() {}

  announceMission(mission:string){
    this.missionAnnounceSource.next(mission);
  }

  confirmMission(astronaut:string){
    this.misssionConfirmedSource.next(astronaut);
  }
}

MissioncontrolComponent：這是一個主要界面的組件，在界面中調(diào)用了astronaut組件。當(dāng)前組件就是父組件，而astronaut組件就是一個子組件。

import { Component, OnInit } from '@angular/core';
import { MissionService } from 'src/app/service/mission.service';

@Component({
  selector: 'app-missioncontrol',
  template: `
導(dǎo)彈控制器

  準備開始
  
  
  
日志

  
    
    {{event}}
  

  `,
})
export class MissioncontrolComponent implements OnInit {
  astronauts = ['操作員1','操作員2','操作員3'];
  history:string[] = [];
  missions = ['發(fā)射導(dǎo)彈'];
  nextMession = 0;
  constructor(private misssionSvc:MissionService) {
     // 獲取子組件保存的信息，獲取是哪一個操作員點擊確認了
     misssionSvc.missionConfirm$.subscribe((astronaut)=>{
       this.history.push(`${astronaut}已經(jīng)確認`);
     })
  }

  announce(){
    let mission = this.missions[this.nextMession++];
    this.misssionSvc.announceMission(mission);
    this.history.push(`任務(wù)"${mission}"進入準備`);
    if(this.nextMession>=this.missions.length){
      this.nextMession = 0;
    }
  }
  ngOnInit(): void {
  }
}

AstronautComponent：點擊確認，向父組件傳遞確認的操作員信息。

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { MissionService } from 'src/app/service/mission.service';

@Component({
  selector: 'app-astronaut',
  template: `
  

  {{astronaut}}:{{mission}}確認
  

  `,
})
export class AstronautComponent implements OnInit,OnDestroy{
  @Input() astronaut:string='';
  mission = '<沒有任務(wù)>';
  confirmed = false;
  announced = false;
  subscription:Subscription;
  constructor(private missionSvc:MissionService) {
    // 獲取父組件的數(shù)據(jù)
    this.subscription = missionSvc.missionAnnounce$.subscribe((mission)=>{
      this.mission = mission;// 發(fā)射導(dǎo)彈
      this.announced = true;// 激活確認按鈕
      this.confirmed = false;
    })
  }
  confirm(){
    // 禁用按鈕
    this.confirmed = true;
    // 點擊確認，保存當(dāng)前的操作員數(shù)據(jù)
    this.missionSvc.confirmMission(this.astronaut);
  }
  ngOnDestroy(): void {
    // 防止內(nèi)存泄漏
    this.subscription.unsubscribe();
  }
  ngOnInit() {
  }
}

5.5 路由傳值

按鈕點擊跳轉(zhuǎn)：路由傳參數(shù)由分號隔開。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-father',
  template:`按鈕跳到兒子組件中`
})
export class FatherComponent implements OnInit {
  obj:any=[
    '書悟空',
    '唐僧',
  ];
  constructor(private router:Router) {}

  ngOnInit() {}

  linkSon(){
    this.router.navigate(['/son',{ name:this.obj,id:10010}]);
    //http://localhost:4209/son;name=書悟空,唐僧;id=10010
  }
}
// private route:ActivatedRoute
this.route.params.subscribe((route)=>{
       console.log(route);
})

鏈接點擊跳轉(zhuǎn)：路由傳參通過queryParams屬性控制，由?、&符號分隔開。

鏈接跳到兒子組件中
// http://localhost:4209/son?id=10010&name=書悟空&name=唐僧
// private route:ActivatedRoute
this.route.queryParams.subscribe((route)=>{
       console.log(route);
})

鏈接點擊跳轉(zhuǎn)：直接是用/分割路由傳參。

{ path: 'son/:id', component: SonComponent },
鏈接跳到兒子組件中
// http://localhost:4209/son/10010
// private route:ActivatedRoute
this.route.params.subscribe((route)=>{
       console.log(route);
})

還有其他通信方式：瀏覽器本地傳值（localStorge、SessionStorge）、cookie

6 Angular的八大生命周期

6.1 ngOnChanges()

當(dāng)angular檢測到組件（或指令）重新設(shè)置數(shù)據(jù)綁定輸入屬性時響應(yīng)。在被綁定的輸入屬性的值發(fā)生變化時調(diào)用，首次調(diào)用一定會發(fā)生在ngOnInit()之前，每一次改變綁定數(shù)據(jù)就調(diào)用一次這個鉤子。OnChanges()對應(yīng)的函數(shù) ngOnChanges()，該函數(shù)獲取了一個對象，對象把每個發(fā)生變化的屬性名映射在SimpleChange對象中，對象有屬性當(dāng)前值currentValue和前一個值previousValue。

父組件：




  我是父組件：
  
  {{dataSource}}

子組件：




  我是子組件：
  +
  {{data}}
  -

import { Component, Input, OnInit, SimpleChanges, OnChanges } from '@angular/core';
// 子組件js
export class TwoComponent implements OnInit,OnChanges {
  @Input() data:any=0;
  constructor() { }
  ngOnInit(): void {
    console.log('ngOnInit',this.data);
  }

  increment(){
    this.data++;
  }
  decrement(){
    this.data--;
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log("previousValue：",changes['data'].previousValue);
    console.log("currentValue：",changes['data'].currentValue);
  }
}

注意地，在子組件中操作是不能觸發(fā)Onchanges鉤子函數(shù)地，它是控制組件上屬性的改變而觸發(fā)。

Angular表單、管道、綁定、指令、通信和周期源碼分析

6.2 ngOnInit()

在Angular第一次顯示數(shù)據(jù)綁定和設(shè)置指令/組件的輸入屬性之后，初始化指令/組件，在第一輪ngOnChanges()完成之后調(diào)用，只調(diào)用一次。

6.3 ngDoCheck()

檢測變化，在每一個Angular變更檢測周期（變化監(jiān)測）中調(diào)用，在執(zhí)行ngOnChanges和ngOnInit()方法之后調(diào)用。不管是數(shù)據(jù)綁定還是鼠標(biāo)的點擊事件，只要觸發(fā)了都會觸發(fā)這個鉤子的調(diào)用。


  
  {{dataSource}}

import { DoCheck,OnInit } from '@angular/core';

export class SonComponent implements OnInit,DoCheck {
  dataSource:any;
  constructor() { }

  ngOnInit(): void {
    console.log("ngOnInit!");
  }

  ngDoCheck(): void {
    console.log("DoCheck：",this.dataSource);
  }
}

Angular表單、管道、綁定、指令、通信和周期源碼分析

6.4 ngAfterContentInit()

把內(nèi)容投影進組件之后調(diào)用，在第一次執(zhí)行ngDoCheck方法之后調(diào)用，只調(diào)用一次。

import { AfterContentChecked, AfterContentInit,DoCheck, Input, OnInit } from '@angular/core';

export class SonComponent implements OnInit,DoCheck,AfterContentInit{
  @Input() data:any=0;
  dataSource:any;
  constructor() { }

  ngOnInit(): void {
    console.log("ngOnInit!");
  }

  ngAfterContentInit(): void {
    console.log("ngAfterContentInit!",this.dataSource);
  }

  ngDoCheck(): void {
    console.log("DoCheck：",this.dataSource);
  }
}

Angular表單、管道、綁定、指令、通信和周期源碼分析

6.5 ngAfterContentChecked()

在每次完成被投影組件內(nèi)容的變更檢測之后調(diào)用。在執(zhí)行ngAfterContentInit()和ngDoCheck()方法之后調(diào)用。

import { AfterContentChecked, AfterContentInit, DoCheck, Input,  OnInit } from '@angular/core';

export class SonComponent implements OnInit,DoCheck,AfterContentInit,AfterContentChecked{
  @Input() data:any=0;
  dataSource:any;
  constructor() { }

  ngOnInit(): void {
    console.log("ngOnInit!");
  }

  ngAfterContentInit(): void {
    console.log("ngAfterContentInit!",this.dataSource);
  }

  ngAfterContentChecked(): void {
    console.log("ngAfterContentChecked!",this.dataSource);
  }

  ngDoCheck(): void {
    console.log("DoCheck：",this.dataSource);
  }
}

Angular表單、管道、綁定、指令、通信和周期源碼分析

6.6 ngAfterViewInit()

在初始化完組件視圖及其子視圖之后調(diào)用，在第一次執(zhí)行ngAfterContentChecked()方法之后調(diào)用，只調(diào)用一次。

export class SonComponent implements OnInit,DoCheck,AfterContentInit,AfterContentChecked,AfterViewInit{
  dataSource:any;
  constructor() { }

  ngOnInit(): void {
    console.log("ngOnInit!");
  }

  ngAfterContentInit(): void {
    console.log("ngAfterContentInit!",this.dataSource);
  }

  ngAfterContentChecked(): void {
    console.log("ngAfterContentChecked!",this.dataSource);
  }

  ngAfterViewInit(): void {
    console.log("ngAfterViewInit!");
  }

  ngDoCheck(): void {
    console.log("DoCheck：",this.dataSource);
  }
}

Angular表單、管道、綁定、指令、通信和周期源碼分析

6.7 ngAfterViewChecked()

在每次完成組件視圖和子視圖的變更檢測之后調(diào)用。在執(zhí)行ngAfterViewInit()和ngAfterContentChecked()方法之后調(diào)用。

Angular表單、管道、綁定、指令、通信和周期源碼分析

6.8 ngOnDestroy()

在Angular每次銷毀指令/組件之前調(diào)用并清掃，在這里反訂閱可觀察對象和分離事件處理器，以防內(nèi)存泄漏。什么時候會調(diào)用這個生命周期呢？也就是平時我們切換組件或從一個組件跳轉(zhuǎn)到另一個組件的時候，這時候就會觸發(fā)組件的銷毀。

關(guān)于“Angular表單、管道、綁定、指令、通信和周期源碼分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Angular表單、管道、綁定、指令、通信和周期源碼分析”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


網(wǎng)頁題目：Angular表單、管道、綁定、指令、通信和周期源碼分析
本文URL：http://weahome.cn/article/igjpop.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部