Angular引用控件类

说明:

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

相关推荐
mrsk2 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan4 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE8 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年10 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能20 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房20 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃22 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂25 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7725 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑1 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js