说明:
angular 在一个控件类里面,引入另外一个控件类,这样做的好处,就是代码分离,当你一个页面存在多少类似于独立的界面时,可以使用这种方式,分离代码 更好维护程序
效果图:
step1:E:\projectcar\ajcar\ajnine\untitled4\src\app\app.routes.ts
typescript
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
xml
<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
typescript
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
xml
<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
typescript
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