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

相关推荐
江拥羡橙4 小时前
Vue和React怎么选?全面比对
前端·vue.js·react.js
千码君20164 小时前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
楼田莉子6 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝6 小时前
Vue总结
前端·javascript·vue.js
木易 士心6 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER6 小时前
Web 开发 21
前端·学习
又是忙碌的一天6 小时前
前端学习day01
前端·学习·html
Joker Zxc6 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel7 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
大前端helloworld7 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端