さらに別の Angular 記事、パーツ コンポーネントの作成

前の記事では、プロジェクトの作成について説明しました。つまり、サブプロジェクトではなくメインプロジェクトです。それらについては、今後の記事の主題となります。

今日はコンポーネントの作成に関連します。プロジェクトの作成と同様に、Angular CLI はあなたの親友です。それでは、次のことを考えてみましょう:

 
コンポーネント hello-world
を生成しません

my-new-project/src/app/hello-world フォルダーで 4 つのファイルを含むコード生成が実行されます。

• hello-world.component.html : テンプレート
• hello-world.component.scss : scss 形式のスタイル。これはプロジェクト作成プロンプトで選択したものです
• hello-world.component.spec.ts : テスト ファイル
• hello-world.component.ts : コンポーネント

ここで ngserve を実行し、ブラウザで localhost:4200 を開いて結果を確認します
ただし、コンポーネントはレンダリングされません。なぜですか?
私たちはそれを使用しなかったため、:-)

次に、ルート コンポーネント「app.component.ts」を開き、「imports」セクションに HelloWorlComponent を追加します。

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@Component({
 selector: 'app-root',
 imports: [RouterOutlet, HelloWorldComponent],
 templateUrl: './app.component.html',
 styleUrl: './app.component.scss',
})
export class AppComponent {
 title = 'angular-tutorial';
}

コンポーネントが AppComponent で利用可能になり、使用できるようになりました。 hello-world.component.html ファイルを編集し、すべてのコードを次のように置き換えるだけです:

<app-hello-world></app-hello-world>
<router-outlet />

プロジェクトの作成時に Angular Router のインストールを妨げなかったため、たとえば router-outlet のことは忘れてください (ルーティングしたくない場合は、これを行うことができます: ng new my-new-project --routing=false )

デフォルトのセレクター接頭辞は「app」です。そのため、コンポーネントのセレクターは「app-hello-world」です

ブラウザを確認すると、コンポーネントのデフォルトのコンテンツが表示されます。

これを hello-world.component.scss に追加することで、CSS をカスタマイズできます:

:host {
 color: blueviolet
}

ブラウザを確認すると、テキストの新しい色が表示されます。 :host セレクターは、現在の hello-world コンポーネントに関連しています。

これで、単純なコンポーネントを生成する方法がわかりました

良い一日をお過ごしください?

[元の投稿] https://rebolon.medium.com/yet-another-angular-article-part-2-components-creation-550c14b991a2

以上がさらに別の Angular 記事、パーツ コンポーネントの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。