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

相关推荐
会发光的猪。17 分钟前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒18 分钟前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun33 分钟前
react的import 导入语句中的特殊符号
前端·react.js
前端青山34 分钟前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
励志前端小黑哥2 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟2 小时前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特2 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解2 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~2 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf