文章管理系统网站模板头条新闻 最新消息条

说明：
angular 在一个控件类里面，引入另外一个控件类，这样做的好处，就是代码分离，当你一个页面存在多少类似于独立的界面时，可以使用这种方式，分离代码 更好维护程序
效果图：

step1:E:\projectcar\ajcar\ajnine\untitled4\src\app\app.routes.ts

import { Routes } from '@angular/router';import {ContentExampleComponent} from './content/content-example/content-example.component';export const routes: Routes = [{path:'content',component:ContentExampleComponent}
];

step2: E:\projectcar\ajcar\ajnine\untitled4\src\app\content\content-example\content-example.component.html

<div style="background: red"><div class="w-8/12 bg-blue-100 mx-auto mt-5"><a href="" routerLink="/content" class="ml-4 underline text-blue-500">Go to Component Concept</a><div><app-content-second><p>This content is coming from the Parent</p><ng-container card-title>This is content from <b>custom selector</b></ng-container><div ngProjectAs="card-name"><b>Content from ngProjectAs</b></div></app-content-second></div></div>
</div>

step3: E:\projectcar\ajcar\ajnine\untitled4\src\app\content\content-example\content-example.component.ts

import { Component } from '@angular/core';import { ContentSecondComponent } from "../content-second/content-second.component";
import {RouterLink} from '@angular/router';@Component({selector: 'app-content-example',standalone: true,imports: [ContentSecondComponent, RouterLink],templateUrl: './content-example.component.html',styleUrl: './content-example.component.css'
})
export class ContentExampleComponent {}

step4: E:\projectcar\ajcar\ajnine\untitled4\src\app\content\content-second\content-second.component.html

<div style="background: coral"><h1>This is the child content component</h1><p>Projected content will be shown below</p><hr class="border-t border-gray-300 mb-8" /><ng-content></ng-content><ng-content select="[card-title]"></ng-content><!-- for ng project as--><ng-content select="card-name"></ng-content><div><p>HostListener example. {{ label }}</p></div>
</div>

step5: E:\projectcar\ajcar\ajnine\untitled4\src\app\content\content-second\content-second.component.ts

import {Component, HostBinding, HostListener} from '@angular/core';@Component({selector: 'app-content-second',standalone: true,imports: [],templateUrl: './content-second.component.html',styleUrl: './content-second.component.css'
})
export class ContentSecondComponent {@HostBinding('attr.aria-valuenow')value: number = 0;public label?: string;@HostListener('click', ['$event'])updateValue(event: MouseEvent) {this.label = 'Child component has been clicked';}}

end