文明网站建设方案,上海高端网站公司,诚信快捷小企业网站建设,爱链网买链接说明#xff1a; angular 在一个控件类里面#xff0c;引入另外一个控件类#xff0c;这样做的好处#xff0c;就是代码分离#xff0c;当你一个页面存在多少类似于独立的界面时#xff0c;可以使用这种方式#xff0c;分离代码 更好维护程序 效果图#xff1a;
step…说明 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 stylebackground: reddiv classw-8/12 bg-blue-100 mx-auto mt-5a href routerLink/content classml-4 underline text-blue-500Go to Component Concept/adivapp-content-secondpThis content is coming from the Parent/png-container card-titleThis is content from bcustom selector/b/ng-containerdiv ngProjectAscard-namebContent 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 stylebackground: coralh1This is the child content component/h1pProjected content will be shown below/phr classborder-t border-gray-300 mb-8 /ng-content/ng-contentng-content select[card-title]/ng-content!-- for ng project as--ng-content selectcard-name/ng-contentdivpHostListener 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
