0

我创建了一个header组件。这是html（header.component.html）：

<section class="container global-header-presentation">
  <div class="header-presentation" *ngFor="let elem of myFormTemplate">
     <h1 class="title">{{elem.title}}</h1>    
  </div>
</section>

这是代码（`header.component.ts'）：

import { Component, OnInit } from '@angular/core';
import { FormTemplateDataService } from '../services/form-template-data.service';

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

  myFormTemplate: any = []

  constructor(
    private formTemplateDataService: FormTemplateDataService
  ) { }

  ngOnInit() {
    this.formTemplateDataService.getJSON().subscribe(data => {
      console.log(data)
      this.myFormTemplate = data;
    })
  }
}

该组件从服务的本地 json 文件接收数据。这是我的服务（form-template-data-service.service.ts）：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class FormTemplateDataService {

    constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/templates/headers/projects.json");
    }
}

这里是我的本地 json ( projects.json)：

[
    {
        "title":"Projects",
        "subtitle":"Click on a box to add or update items in your plan",
        "type": "linkBox"
    },
    {
        "title":"Other Projects",
        "subtitle":"Click on a box to add or update items in your plan",
        "type": "linkBox"
    }
]

我想做的事：在我的应用程序的所有其他组件中 实现我的组件<app-header></app-header>，但能够根据我实现它的组件来更改它的内容（标题、副标题、文本等）。例如，如果我在组件中实现我的头组件 ( <app-header></app-header>) 'Projects'，标题将是“项目”，但如果我在组件中实现我的头组件 ( <app-header></app-header>) 'Other Projects'，标题将是'Other Projects'。我希望所有数据都保存在我拥有的本地 json 中。有人知道怎么做吗？

4

1 回答 1

1

Input() 装饰器应该在这里创造奇迹。

头文件

import { Component, OnInit } from '@angular/core';
import { FormTemplateDataService } from '../services/form-template-data.service';

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

  myFormTemplate: any = []
  Input() pageTitle: string;
  constructor(
    private formTemplateDataService: FormTemplateDataService
  ) { }

  ngOnInit() {
    this.formTemplateDataService.getJSON().subscribe(data => {
      console.log(data)
      this.myFormTemplate = data;
    })
  }
}

父组件

<app-header pageTitle="sampleTitle"></app-header>

标题 html


     <h1 class="title">{{pageTitle}}</h1>

在此示例中，标题只是一个硬编码字符串，但这可以从标题组件的父组件动态设置。

于 2020-05-19T07:39:34.393 回答