Question

我对Angular完全陌生，所以请原谅：）。

我尝试提供一个概述页面（overview.component），其中显示了一个包含Product Ideas（idea.component）的列表。

概述组件（overview.component）的代码如下所示：

import {Component, TemplateRef} from '@angular/core';
import { IdeaComponent } from '../Components/ideaComponent/idea.component';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { FormsModule } from '@angular/forms';



@Component({
  selector: 'app-overview-component',
  templateUrl: './overview.component.html'
})


export class OverviewComponent {

  modalRef: BsModalRef;

  newIdea = new IdeaComponent();

  ideas = [
    new IdeaComponent('Test Project', 'Marc Salavador', new Date(2018, 3, 5)),
    new IdeaComponent('Test Project', 'Marc Salavador', new Date(2018, 3, 5)),
  ];

  constructor(private modalService: BsModalService) {}

  public openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }

}

概览页面的 HTML （overview.component.html）如下所示：

<body>

<h1>Overview</h1>

<br>
<br>

<div class="card">
    <h5 class="card-title border font-weight-bold">Create your own Product Idea:</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  <button type="button" class="btn btn-primary" (click)="openModal(newIdeaModal)">Create new Product Idea</button>
</div>

<!-- New Idea Modal -->
<ng-template #newIdeaModal>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="form-group">
      <label>Titel:</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label>Author:</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="modalRef.hide()">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</ng-template>


<br>
<br>

<h4>Current Product Ideas:</h4>

<div *ngFor="let idea of ideas">
  <app-idea-component title="{{idea.title}}" author="{{idea.author}}" [date]="idea.date"></app-idea-component>
</div>

</body>

Idea Component（idea.component）的代码如下所示：

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

@Component({
  selector: 'app-idea-component',
  templateUrl: './idea.html'
})


export class IdeaComponent {

  constructor (public title: string = '',
               public author: string = '',
               public date: any = '') {}

}

Angular现在报告一个错误，它无法解析IdeaComponent的所有参数。

我非常感谢对此的一些支持。

祝你好运

Answer 1

您尝试通过构造函数将输入传递给IdeaComponent，这会导致Angular DI系统查找标题，作者和日期的提供者。您需要Inputs使用component interaction：

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

@Component({
  selector: 'app-idea-component',
  templateUrl: './idea.html'
})
export class IdeaComponent {

  @Input() public title: string = '';
  @Input() public author: string = '';
  @Input() date: any = '';

}

Answer 2

将IdeaComponent组件更改为：

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

@Component({
  selector: 'app-idea-component',
  templateUrl: './idea.html'
})


export class IdeaComponent {

  @Input() title: string = ''
  @Input() author: string = ''
  @Input() date: any = ''
  constructor () {}

}

Angular 4错误：无法解析Component的所有参数

2 个答案: