Angular 4数据返回方法及TypeScript布尔返回值方法创建问题

我来帮你搞定这两个问题哈～

Angular里返回数据的场景挺多的，我给你列几个最常用的：

• 父子组件间传递返回数据
  子组件可以通过@Output()事件发射器把数据“返回”给父组件，举个例子：
  子组件代码：

  import { Component, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-child',
    template: `<button (click)="sendDataToParent()">点我返回数据给父组件</button>`
  })
  export class ChildComponent {
    // 定义事件发射器，用来发射数据
    @Output() dataToParent = new EventEmitter<string>();
  
    sendDataToParent() {
      this.dataToParent.emit('这是子组件返回的内容');
    }
  }
  

  父组件模板监听事件：

  <app-child (dataToParent)="handleData($event)"></app-child>
  

  父组件类处理接收的数据：

  handleData(data: string) {
    console.log('收到子组件的数据：', data); // 这里就能拿到返回的数据啦
  }
  

• 服务中返回数据（比如HTTP请求）
  如果是从后端接口获取数据，用Angular的HttpClient返回Observable，订阅后就能拿到数据：
  服务代码：

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class DataService {
    constructor(private http: HttpClient) {}
  
    // 返回Observable，组件订阅后获取数据
    fetchRemoteData(): Observable<any> {
      return this.http.get('你的后端接口地址');
    }
  }
  

  组件中调用服务：

  import { Component, OnInit } from '@angular/core';
  import { DataService } from './data.service';
  
  @Component({
    selector: 'app-root',
    template: `<div>{{ remoteData }}</div>`
  })
  export class AppComponent implements OnInit {
    remoteData: any;
  
    constructor(private dataService: DataService) {}
  
    ngOnInit() {
      this.dataService.fetchRemoteData().subscribe(data => {
        this.remoteData = data; // 拿到服务返回的数据
      });
    }
  }
  

• 路由跳转时传递返回数据
  可以用路由的state携带数据，目标组件就能获取到：
  跳转组件代码：

  import { Router } from '@angular/router';
  
  constructor(private router: Router) {}
  
  navigateWithData() {
    this.router.navigate(['/target-page'], { state: { passedData: '路由传递的返回数据' } });
  }
  

  目标组件获取数据：

  import { Component } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-target',
    template: `<div>{{ receivedData }}</div>`
  })
  export class TargetComponent {
    receivedData: string;
  
    constructor(private route: ActivatedRoute) {
      this.receivedData = this.route.snapshot.state?.passedData;
    }
  }
  

你写的boolean function1(){ return true; }语法不对哦～TypeScript里返回类型是放在方法/函数名后面的，不是前面。给你几种正确的写法：

• 普通函数写法：

  function function1(): boolean {
    return true;
  }
  

• 类中的方法写法：

  class MyClass {
    getBooleanResult(): boolean {
      // 可以在这里加逻辑判断，最后返回布尔值
      return 5 > 3; // 这里返回true
    }
  }
  

• 箭头函数写法：

  const getBooleanValue = (): boolean => {
    return false;
  };
  

现在调用这些函数/方法就能拿到正确的布尔值啦，比如console.log(function1())会输出true。

内容的提问来源于stack exchange，提问作者Gaurav Verma