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

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮3 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119403 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689976 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt