angular组件通信，数据请求，路由

╰半夏微凉° 2023-06-18 12:58 2阅读 0赞

## **一.父子组件及组件之间的通信** ##

**父组件给子组件传值 -@input（可以传递数据，方法以及整个父组件(传递this  \[home\]=****’****this****’)）**

1.  父组件调用子组件的时候传入数据   
     <app-xx \[msg\] = ‘msg’></app-xx>
2.  子组件引入Input模块      
    import \{Input\} from ‘@angular/core’
3.  子组件中@Input接收父组件传来的数据    
    @input msg:string

**父组件通过@ViewChild获取子组件的数据和方法**

(1)给子组件定义\#name

<app-child \#name></app-child>

(2)在父组件中引入ViewChild

import \{ ViewChild \} from ’@angular/core’

(3)获取子组件

@ViewChild(‘name’) name:any;

(4)调用子组件的数据和方法

this.name.xx;

**子组件通过@Output触发父组件的方法**

1.子组件引入Output和EventEmitter

import \{ Output,EventEmitter \} from ‘@angular/core’

2.子组件中实例化EventEmitter

@Output() private outer = new EventEmitter<string>()

3.子组件通过EventEmitter对象outer实例广播数据

sendParent()\{  
this.outer.emit(‘msg from child ’);\}

4.父组件调用子组件的时候，定义接收事件，outer就是子组件的EventEmitter对象的outer

<app-child (outer) = ‘runParent($event)’></app-child>

runParent(e)\{ e;//子组件给父组件广播的数据\}

**非父子组件通信 -->服务/localSrtroage**

## Angular数据请求 ##

**Angular get请求数据**

**1.在app.moudule.ts中引入HttpClientModule并注入**

** import \{ HttpClientModule \} from** **‘****@angular/common/http****’****;**

**2.在用到的地方引入HttpClient并在构造函数中声明**

** import \{ HttpClient \} from** **‘****@angular/common/http****’**

**constructor(public http:HttpClient ) \{\}**

**3.get请求数据**

** var api =** **‘****http://xxx.com****’**

**this.http.get(api).subscribe(response => \{\})**

**Angular post 请求数据**

**1.在app.moudule.ts中引入 并注入**

** import \{ HttpClientModule \} from** **‘****@angular/common/http****’****;**

**2.在用到的地方引入HttpClient,HttpHeaders并在构造函数中声明**

** import \{ HttpClient ,HttpHeaders \} from** **‘****@angular/common/http****’**

**constructor(public http:HttpClient ) \{\}**

**3.post请求数据**

** const httpOptions = \{**

**headers:new HttpHeaders(\{** **‘****Contnet-Type****’****:****’****application/json****’****\})**

**\}**

**var api =** **‘****http://xxx.com****’****;**

**this.http.post(api,\{xxx:xxx\},httpOptions ).subscribe(response =>\{\})**

## **路由** ##

路由：根据不同的url地址，动态的让根组件挂载其他组件来实现一个单页面应用

1.安装路由：

ng generate module app-routing --flat --module=app

2.在app-routing.module.ts中引入模块e

import { NewsComponent } from './components/news/news.component';
    import { HomeComponent } from './components/home/home.component';
    import { ProductComponent } from './components/product/product.component';

3.配置路由

import { RouterModule, Routes } from '@angular/router';
    const routes: Routes = [
      //{ path: '', redirectTo: '/home', pathMatch: 'full' },//默认路由
      { path: 'home', component: HomeComponent },
      { path: 'news', component: NewsComponent },
      { path: 'product', component: ProductComponent },
      //匹配不到路由的时候加载的组件
      {
        path:'**',
        redirectTo:'home'
      }
    
    ];
    @NgModule({
      declarations: [],
      imports: [
        CommonModule,
        RouterModule.forRoot(routes)
      ],
      exports:[RouterModule]
    })
    
    //具有选中功能
    <a [routerLink]="[ '/home' ]" routerLinkActive="active">home</a>

t \} fro**get传值**

（1）传值
    <ul>
        <li *ngFor="let item of list;let key=index">
            <a href="@">
                        
                <a [routerLink]="[ '/newscontent']" [queryParams]="{aid:key,name:item}">{
       {key}} --- {
       {item}}</a>
            </a>
        </li>
    </ul>
    （2）接收
    import { ActivatedRoute } from '@angular/router';
    export class NewscontentComponent implements OnInit {
      constructor(
        public route:ActivatedRoute
      ) { }
      ngOnInit() {
        console.log(this.route.queryParams.subscribe((data)=>{
          console.log(data);
        }));
      }
    }

m './co**动态路由：**

（1）配置动态路由
     { path: 'newscontent/:aid', component: NewscontentComponent },
    （2）跳转
    <ul>
      <li *ngFor="let item of list;let key=index">
        <a [routerLink]="[ '/newscontent/', key ]">{
       {key}} -- {
       {item}}</a>
      </li>
    </ul>
    （3）接收
        this.route.params.subscribe(data=>{
          console.log(data);
        });

mpon**动态路由js跳转**

<button (click)='goNewsContent()'>js跳转路由</button>
    //.ts
    import { Router } from '@angular/router';
      constructor(
        public router:Router
      ) { }
      goNewsContent(){
        //路由跳转
    this.router.navigate(['/productcontent'])
    // this.router.navigate(['/newscontent/','3'])
      }

ents/p**Get传值跳转**

<button (click)='getNews()'>get传值跳转路由</button>
    //.ts
    import { NavigationExtras } from '@angular/router';
    
      getNews(){
        //跳转并进行get传值
        let queryParams:NavigationExtras = {
          queryParams:{'aid':123}
        }
        this.router.navigate(['/news'],queryParams)
      }

roduct/**父子路由（嵌套路由）**

const routes: Routes = [
      {
        path: 'home', component: HomeComponent,
        children: [
          { path: 'welcome', component: WelcomeComponent },
          { path: 'setting', component: SettingComponent },
          { path: '**', redirectTo: '/home/welcome' },
        ]
      },
      {
        path: 'product', component: ProductComponent,
        children: [
          { path: 'plist', component: PlistComponent },
          { path: 'pcate', component: PcateComponent },
          { path: '**', redirectTo: '/product/pcate' },
        ]
    
      },
      { path: 'news', component: NewsComponent },
      { path: '**', redirectTo: '/home' },
    ];
    
    @NgModule({
      declarations: [],
      imports: [
        CommonModule,
        RouterModule.forRoot(routes),
      ],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

product.component';