angular 項目文件 index.html 的結構

Question

我正在研究 angular 項目的結構。 我看到 index.html 文件是頁面上顯示的唯一 html 代碼。 如何查看其他html頁面相關代碼？ 我考慮過為要包含在 index.html 文件中的文件導入選擇器，但它對我不起作用。 我嘗試創建這個遍歷數組並檢查第一個人是否叫 Andrea 的練習。 如果是，將背景顏色設置為紅色。 但是屏幕上什么也沒有顯示。 這就是我想知道與所有組件的選擇器相關的所有標簽都應該導入到 index.html 文件中嗎？

 import { Component } from '@angular/core'; @Component({ selector: 'app-esercizi', templateUrl: './esercizi.component.html', styleUrls: ['./esercizi.component.scss'] }) export class EserciziComponent { studente: any; } //ESERCIZIO 2 let studente: { id: number, name: string} [] = [ {"id": 0, "name": "Andrea"}, {"id": 1, "name": "Nicola"}, {"id": 2, "name": "Sabrina"} ]

 .red-background { background-color: red; }

 <body [ngClass]="{'red-background': studente.name=='Andrea'}"> <div *ngFor="let s of studente"> <div>{{studente.name}}</div> <body>

index.html

 <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Esercizi</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> <app-esercizi></app-esercizi> </body> </html>

Answer 1

在 Angular 中，當我們查看索引時，我們可以看到一個通常類似於

<my-app>loading</my-app>
//or
<app-root>loading</app-root>

Angular 用不同的組件重新放置這個標簽

這個標簽是什么？

在 Angular 你有 angular.json 一些像

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  ...
  "projects": {
    "demo": {
      "root": "",
       ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
             ...
            "main": "src/main.ts",
}

查看您的 src/main.ts。 你看

platformBrowserDynamic().bootstrapModule(AppModule)

你可能會看到一些像

bootstrapApplication(AppComponent)

如果我們使用platformBrowserDynamic().bootstrapModule(AppModule) ，我們將前往定義 AppModule 的位置。 你看

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})

那就是“bootstrap”是AppComponent

AppComponent 的選擇器是什么？ 確切的： my-app

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

好吧，沒有人強迫我們使用這些名字

angular 項目文件 index.html 的結構

問題描述

1 個解決方案

解決方案1
1 2023-01-26 12:03:13

angular 項目文件 index.html 的結構

問題描述

1 個解決方案

解決方案1 1 2023-01-26 12:03:13

解決方案1
1 2023-01-26 12:03:13