Question

我一般对Angular和TypeScript还是陌生的。

在我的AppComponent HTML中，我用 <app-listpost></app-listpost>

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

该函数只是将对象从ListPostComponent添加到数组中

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

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标记<app-listpost></app-listpost>的AppComponent构造函数中收到的ListPostComponent实例？

Answer 1

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

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

1 个答案: