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

相关推荐
清幽竹客20 分钟前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim20 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿24 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年24 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js