时间戳

首页 > 解决方案 > 将 HTML 中的组件标签链接到构造函数中传递的组件

javascript - 将 HTML 中的组件标签链接到构造函数中传递的组件

问题描述

一般来说，我对 Angular 和 TypeScript 还是很陌生。

在我的 AppComponent HTML 中，我注入了另一个组件 <app-listpost></app-listpost>

但是在 TypeScript 中，我也收到了这个组件，因为我的 AppComponent 导入了我的 ListPostComponent 以便从 AppComponent 中的 ListPostComponent 调用一个函数。

该函数只是将一个对象添加到 ListPostComponent 的数组中

因此，我发现从 AppComponent 调用该函数是可行的，但与 AppComponent 一起使用的数组来自另一个实例，而不是 ListPostComponent 中使用 HTML 标记实例化的数组。

app.component.html

<div style="text-align:center">
  <h1>
    {{ getTitle() }}
  </h1>
</div>
<app-listpost></app-listpost>
<button class="btn btn-success" (click)="addPostToList('test title from AppComponent', 'test content from AppComponent')">Add test post</button>

app.component.ts

import { Component } from '@angular/core';
import { ListpostComponent } from './listpost/listpost.component'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers:[ListpostComponent]
})
export class AppComponent {
  title = 'Exercise';

  constructor(private listPostComp: ListpostComponent){}

  public addPostToList(newTitle, newContent){
    this.listPostComp.addPostToList(newTitle, newContent);
  }

  getTitle(){
      return this.title;
  }
}

listpost.component.html

<button class="btn btn-success btn-test" (click)="addPostToList('test title from ListPostComponent', 'test content from ListPostComponent')">Add test post</button>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <ul class="list-group">
                <app-post   *ngFor="let post of getListPosts()"
                            [Title]="post.title"
                            [Content]="post.content"></app-post>
            </ul>
        </div>
    </div>
</div>

listpost.component.ts

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

@Component({
  selector: 'app-listpost',
  templateUrl: './listpost.component.html',
  styleUrls: ['./listpost.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class ListpostComponent implements OnInit {

    private listPosts = [
        {
            title: 'Post example',
            content: 'Content example'
        }
    ];

    constructor() { }

    ngOnInit() {
    }

    addPostToList(newTitle, newContent){
        let newPost = {
            title: newTitle,
            content: newContent
        }

        this.listPosts.push(newPost);

        console.log("Added new post with title : \"" + newTitle + "\" and content : \"" + newContent + "\"");
        console.log(this.listPosts); //DEBUG
    }

    getListPosts(){
        return this.listPosts;
    }
}

最终目标是单击 app.component.html 中的按钮将调用listpost.component.ts中的函数，将对象添加到数组中，并且listpost.component.html中的显示将使用新添加的对象刷新。

由于我上面解释的原因，当我单击 listpost.component.html 中的按钮而不是app.component.html中的按钮时，它可以工作。

因此，有没有办法让我指定我想使用我在 HTML 标记的 AppComponent 的构造函数中收到的 ListPostComponent 的实例<app-listpost></app-listpost>？

标签： javascriptangulartypescript

解决方案

我认为最佳实践是创建一个可注入服务，其中包含具有您的addPostToList()逻辑的功能。然后在您的中创建另一个函数ListPostComponent，调用该服务函数并更新listPosts. 然后在您AppComponent的ListPostComponent.

推荐阅读