Angular：我的 app.component.html 没有注入 index.html<app-root>

Question

这是我的第一个 Angular 项目，我希望能在一些我试图显示的简单数据方面得到一些帮助。

我有一个组件 (AuthorsComponent)，它在我的app.modules.ts文件的声明属性中被引用并导入到文件中。 在模块文件中，我还在 providers 属性中实例化了一个AuthorsService类，然后将其作为依赖项注入到我的AuthorsComponent构造函数中。

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthorsComponent } from './authors/authors.component';
import { AuthorsService } from './authors.service';

@NgModule({
  declarations: [
    AppComponent,
    AuthorsComponent
  ],
  imports: [
  BrowserModule,
    AppRoutingModule,
  ],
  providers: [
    AuthorsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// authors.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class AuthorsService {

  getAuthors() {
    return ["author1", "author2", "author3"];
  }
}

我使用依赖项调用一个 bunk 数据服务数组，并将其设置为AuthorsComponent类中的authors 属性。

// authors.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthorsService } from '../authors.service';

@Component({
  selector: 'authors',
  templateUrl: './authors.component.html',
  styleUrls: ['./authors.component.css']
})
export class AuthorsComponent implements OnInit {
  authors;

  constructor(service: AuthorsService) {
    this.authors = service.getAuthors();
  }

  ngOnInit(): void {
  }

}

'selected' html 包含一个简单的标题和一个<ul><li></li></ul> 。 在我的<li>我使用 *ngFor 指令来映射？ 列表项的作者字符串数组。

<h2>{{ authors.length }} Authors</h2>
<ul>
  <li *ngFor="let author of authors">
    {{ author }}
  </li>
</ul>

在 app 组件中，我声明了一个标题，它甚至不会加载，以及我的自定义组件<authors> 。

<h1>Angular</h1>
<authors></authors>

真的，这可能比任何人需要的信息都多，因为我什至无法从app.component.html获取标题<h1>Angular</h1>来呈现。 但是，我认为这表明我已经对文档进行了大量筛选并在较高层次上理解了 Angular（注意它仍然是一个简单的错误！）这是app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

最后， index.html ：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

回顾一下，有一些东西阻止了我的 index.html <app-root>接收我的app.component.html 。 如果有人能发现可能导致这种情况的原因，将不胜感激。 感谢您的时间！

Answer 1

我只是将上述所有代码放入 Stackblitz 中，效果很好。

在这里查看： https : //stackblitz.com/edit/angular-simple-app-deborahk

问题可能出在代码的其他地方吗？

一些建议（尽管这些建议都不应该至少阻止您的标题出现）

从您的模块中删除它：

  providers: [
    AuthorsService
  ],

使用当前版本的 Angular，您应该使用@Injectable装饰器注册您的服务，您也在这样做。

此外，在组件中注入和调用服务的常见模式更像是这样：

  authors: string[] = [];

  constructor(private service: AuthorsService) { }

  ngOnInit(): void {
    this.authors = this.service.getAuthors();
  }

强类型化数据是个好主意。
使用访问器关键字（例如private ）将创建一个类级别的service变量，您可以在类中的任何位置访问。
在ngOnInit而不是构造函数中加载您的数据。

Angular：我的 app.component.html 没有注入 index.html<app-root>

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-07-23 22:22:06

Angular：我的 app.component.html 没有注入 index.html<app-root>

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-07-23 22:22:06

解决方案1
1 已采纳 2021-07-23 22:22:06