Question

我想与其他人共享一个组件的标题。在我的projects.html中，我有{{post.name}}，它是一张图片，如果单击它，它会转到另一条名为“ about-project”的路线，并且我希望此新组件的标题与图片。

projects.component.html

<div class="container">
    <div class="columns is-multiline is-mobile">
        <div *ngFor="let post of posts; index as i" class="column is-6">
            <img routerLink="/about-project" src="{{post.img}}">
            <div class="about">
                <h3>{{post.name}}</h3>
                <p class="subtitle">{{post.subt}}</p>
                <p class="description">{{post.descript}}</p>
            </div>
        </div>
    </div>

    <div class="page">
        <span *ngFor="let number of numbers">{{number}}</span>
    </div>
</div>

projects.component.ts

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

import { DataService } from '../data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit {

  public numbers = [1,2,3];

posts:Object;
  constructor(private data:DataService) { }

  ngOnInit() {
    this.data.GetPosts().subscribe(
      data => this.posts = data
    )
  }

}

about-project.component.html

<app-header></app-header>

<div class="bg">
    <div class="container">
        <h1>PORTFÓLIO 1</h1> //The title should be here
        <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>Obcaecati nemo cumque deleniti sed, iusto officiis ipsum natus numquam dignissimos!</h3>
    </div>
</div>

<section class="main">
    <div class="intro">
        <h2><mark>Descrição</mark></h2>
        <h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br>natus sapiente est similique!<br>harum rerum cumque quas a sequi rem accusantium,<br> Ut, ipsam. Ea optio repudiandae facere dolorum, odit cupiditate ab</h4>
    </div>

    <div class="container">
        <h2>O que fizemos</h2>
        <hr>

        <div class="content">
            <img src="../../assets/icons/web-programming.png">
            <img src="../../assets/icons/web-programming.png">
        </div>

        <div class="content">
            <p>Desenvolvimento WEB</p>
            <p>Desenvolvimento WEB</p>
        </div>

        <h2>Projeto final</h2>
        <hr>

        <img src="../../assets/imgs/computer.jpg">
    </div>
</section>

<app-footer></app-footer>

about-project.component.ts

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

@Component({
  selector: 'app-about-project',
  templateUrl: './about-project.component.html',
  styleUrls: ['./about-project.component.scss']
})
export class AboutProjectComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

data.service.ts

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

import { HttpClient } from '@angular/common/http'

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

  constructor(private http: HttpClient) { }

  GetPosts() {
    return this.http.get('https://api.myjson.com/bins/7qzmd');
  }
}

当我单击图像时，关于项目的文本应与所单击项目的标题相同

Answer 1

您可以创建一个利用rxjs解决此问题的服务。服务看起来像这样

@Injectable({ provideIn: 'root'})
export class TitleService {
  title$ = new Subject();
}

然后您可以在项目组件中设置值，例如：

this.titleService.title$.next('Project Title');

在子组件中，您订阅可观察对象，例如

public childTitle: string;

title$.subscribe(title => this.childTitle = title);

Answer 2

由于您已经从ProjectsComponent中的API中获取了数据，因此再次获取它没有任何意义。

通过SharedService共享数据是一种处理方式。

但是，如果您使用的是Angular 7.2或更高版本，则也可以使用Router共享数据。

因此，要将数据传递到导航的组件，请使用state：

onProjectClick(post) {
  this.router.navigate(['/about-project'], {state: {data: {...post}}});
}

在要读取传递的数据的组件中，将通过window.history.state进行读取：

ngOnInit() {
  this.project = window.history.state.data;
}

这是您推荐的Working Sample StackBlitz。

与其他组件共享JSON数据

2 个答案: