如何使用Visual Studio中的默认角度项目导入组件

Question

我在使用默认的Angle Visual Studio项目时遇到角度问题。我目前不确定如何向.ts文件中添加多个组件，并且我的工作非常简单

我要做的就是将现有的“ Counter”组件添加到现有的fetch-data.html页中。>

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

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

export class CounterComponent {
    public currentCount = 0;

    public incrementCounter() {
      this.currentCount++;
    }
}
至fetch-data-component.html

<h1 id="tableLabel">Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>
<h1>Counter</h1>

<p>This is a simple example of an Angular component.</p>

<p aria-live="polite">Current count: <strong>{{ counter }}</strong></p>

<button class="btn btn-primary" (click)="counter.incrementCounter()">Increment</button>

<p *ngIf="!forecasts"><em>Loading...</em></p>

<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="forecasts">
  <thead>
    <tr>
      <th>Date</th>
      <th>Temp. (C)</th>
      <th>Temp. (F)</th>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let forecast of forecasts">
      <td>{{ forecast.date }}</td>
      <td>{{ forecast.temperatureC }}</td>
      <td>{{ forecast.temperatureF }}</td>
      <td>{{ forecast.summary }}</td>
    </tr>
  </tbody>
</table>
import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CounterComponent } from '../counter/counter.component';

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

export class FetchDataComponent
{
  public counter: CounterComponent;
  public forecasts: WeatherForecast[];

    constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string)
    {
      http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result =>
      {
          this.forecasts = result;
      }, error => console.error(error));
  }
}

interface WeatherForecast {
  date: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

如您所见，我已导入CounterComponent并将其添加到导出类中

export class FetchDataComponent
{
  public counter: CounterComponent;
但是我得到的只是错误。“ incrementCounter不是函数”我不确定导入CounterComponent之后该去哪里

如何导入计数器组件并将其添加到fetch-data.html页面？导入和使用此组件的正确方法是什么？

我在使用默认的Angle Visual Studio项目时遇到角度问题。我目前不确定如何向.ts文件中添加多个组件，而我正在非常简单地开始...

Answer 1

1. 确保两个组件都在模块声明数组中。