Angular引用控件类

说明:
angular 在一个控件类里面,引入另外一个控件类,这样做的好处,就是代码分离,当你一个页面存在多少类似于独立的界面时,可以使用这种方式,分离代码 更好维护程序
效果图:
在这里插入图片描述

step1:E:\projectcar\ajcar\ajnine\untitled4\src\app\app.routes.ts

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

<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

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

<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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/465245.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 面试题汇总

Android 面试题汇总 文章目录 Android 面试题汇总快手一面同程旅行一面快手二面虎牙二面蚂蚁一面 很多八股文的差不多&#xff0c;这里只汇总一些我不会的知识点 快手一面 tcp三次握手&#xff0c;最后一次失败&#xff0c;网络会怎么样&#xff1f; 如果第三次握手失败的时候…

SQL常见语法

select * from student; select&#xff1a;选取 from&#xff1a;来源 *&#xff1a;所有栏位 select 姓名&#xff0c;班级&#xff0c;成绩 from students; 选取特定栏位 select 姓名&#xff0c;班级&#xff0c;成绩 from students limit 5;--限制显示拦数 select 姓…

用ChatGPT提高工作效率,轻松搞定每天任务!

ChatGPT 在现代工作环境中的关键作用 随着数字化时代的到来&#xff0c;商业环境也进入了一个迅速发展的新时代&#xff0c;技术进步成为推动这一变革的核心力量。自动化和效率已不再是理想&#xff0c;而是企业保持竞争力的必备条件。在这一变化的过程中&#xff0c;人工智能…

程序员开发速查表

作为一名苦逼的程序员&#xff0c;在开发的过程中&#xff0c;我们总是在各种编程语言中来回穿梭&#xff0c;忙完后端整前端&#xff0c;还得做一部分的运维工作&#xff0c;忙的我们有时候忘记语法&#xff0c;忘记编写规则&#xff0c;甚至混淆。这时候我们就希望有一个综合…

【大数据学习 | kafka高级部分】kafka的快速读写

1. 追加写 根据以上的部分我们发现存储的方式比较有规划是对于后续查询非常便捷的&#xff0c;但是这样存储是不是会更加消耗存储性能呢&#xff1f; 其实kafka的数据存储是追加形式的&#xff0c;也就是数据在存储到文件中的时候是以追加方式拼接到文件末尾的&#xff0c;这…

Embedding模型部署及效果评测

最近大模型发展迅速&#xff0c;与之对应的向量化需求也被带动起来了&#xff0c;由此社区也衍生出很多模型&#xff0c;本文选几款&#xff0c;简单做下评测。 前置概念 为方便读者&#xff0c;先简单介绍几个概念。 概念1&#xff1a;Vector Embedding 也即向量化嵌入&am…

RDMA驱动学习(二)- command queue

为了实现用户对网卡硬件的配置&#xff0c;查询&#xff0c;或者执行比如create_cq等命令&#xff0c;mellanox网卡提供了command queue mailbox的机制&#xff0c;本节将以create_cq为例看下这个过程。 command queue&#xff08;后续简称cmdq&#xff09;是一个4K对齐的长度…

在docker里创建 bridge 网络联通不同容器

1.网络创建&#xff1a; docker network create --subnet192.168.1.0/24 --gateway192.168.1.1 uav_management 2.查看网络&#xff1a; docker network ls 3.给已经创建的容器分配ip: docker network connect --ip 192.168.1.10 uav_management 容器名/容器id 示例&#xf…

影响神经网络速度的因素- FLOPs、MAC、并行度以及计算平台

影响神经网络速度的四个主要因素分别是 FLOPs&#xff08;浮点操作数&#xff09;、MAC&#xff08;内存访问成本&#xff09;、并行度以及计算平台。这些因素共同作用&#xff0c;直接影响到神经网络的计算速度和资源需求。 1. FLOPs&#xff08;Floating Point Operations&a…

基于STM32单片机太阳能充电循迹避障小车

本设计基于STM32单片机太阳能充电循迹避障小车&#xff0c;以STM32单片机为微控制器核心&#xff0c;在太阳能板对车载电池充电情况下配合传感器能够实现循迹避障行驶的小车的设计过程。小车采用3.7V锂电池作为电源&#xff0c;太阳能板接入TP4056充电模块&#xff0c;使用MT36…

高效集成金蝶云星空销售出库单的解决方案

审核销售出库单(金蝶->金蝶)集成方案 在企业日常运营中&#xff0c;销售出库单的审核是一个关键环节。为了确保数据的准确性和及时性&#xff0c;我们采用了轻易云数据集成平台&#xff0c;将金蝶云星空系统中的销售出库单数据无缝集成到另一个金蝶云星空系统中。本次案例将…

SpringBoot中使用RESTful风格

文章目录 SpringBoot中使用RESTful风格一、引言二、SpringBoot与RESTful风格1、RESTful风格简介2、SpringBoot中的RESTful注解2.1、代码示例 三、SpringBoot核心配置四、总结 SpringBoot中使用RESTful风格 一、引言 在现代Web开发中&#xff0c;RESTful架构风格因其简洁性和易…

DAY21|二叉树Part08|LeetCode: 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

目录 LeetCode: 669. 修剪二叉搜索树 基本思路 C代码 LeetCode: 108.将有序数组转换为二叉搜索树 基本思路 C代码 LeetCode: 538.把二叉搜索树转换为累加树 基本思路 C代码 LeetCode: 669. 修剪二叉搜索树 力扣代码链接 文字讲解&#xff1a;LeetCode: 669. 修剪二叉搜…

ubuntu20.04安装ros与rosdep

目录 前置配置 配置apt清华源 配置ros软件源 添加ros安装源&#xff08;中科大软件源&#xff09; 设置秘钥 更新源 ros安装 安装ros 初始化 rosdep 更新 rosdep 设置环境变量 安装 rosinstall 安装验证 启动海龟仿真器 操控海龟仿真器 rosdep安装更新 安装 使用…

高亚科技签约酸动力,助力研发管理数字化升级

近日&#xff0c;中国企业管理软件资深服务商高亚科技与广东酸动力生物科技有限公司&#xff08;以下简称“酸动力”&#xff09;正式签署合作协议。借助高亚科技的8Manage PM项目管理软件&#xff0c;酸动力将进一步优化项目过程跟踪与节点监控&#xff0c;提升研发成果的高效…

CSRF与SSRF

csrf(跨站请求伪造)的原理: csrf全称是跨站请求伪造(cross-site request forgery)&#xff0c;也被称为one-click attack 或者 session riding scrf攻击利用网站对于用户网页浏览器的信任&#xff0c;劫持用户当前已登录的web应用程序&#xff0c;去执行分用户本意的操作。 利…

享元模式-实现大颗粒度对象缓存机制

详解 享元模式是一种结构型设计模式&#xff0c;其主要目的是通过共享尽可能多的相同部分来有效地支持大量细粒度的对象。它通过将对象的属性分为内在属性&#xff08;可以共享、不随环境变化的部分&#xff09;和外在属性&#xff08;根据场景变化、不能共享的部分&#xff0…

HTML 基础标签——结构化标签<html>、<head>、<body>

文章目录 1. <html> 标签2. <head> 标签3. <body> 标签4. <div> 标签5. <span> 标签小结 在 HTML 文档中&#xff0c;使用特定的结构标签可以有效地组织和管理网页内容。这些标签不仅有助于浏览器正确解析和渲染页面&#xff0c;还能提高网页的可…

新华三H3CNE网络工程师认证—VLAN的配置

VLAN&#xff08;虚拟局域网&#xff09;是一种在逻辑上划分网络的技术&#xff0c;它可以将一个物理网络分割成多个虚拟网络&#xff0c;从而实现不同组的设备之间的隔离。在配置VLAN时&#xff0c;通常涉及到三种端口类型&#xff1a;Access、Trunk和Hybrid。Access端口用于连…

R语言*号标识显著性差异判断组间差异是否具有统计意义

前言 该R代码用于对Iris数据集进行多组比较分析&#xff0c;探讨不同鸢尾花品种在不同测量变量&#xff08;花萼和花瓣长度与宽度&#xff09;上的显著性差异。通过将数据转换为长格式&#xff0c;并利用ANOVA和Tukey检验&#xff0c;代码生成了不同品种间的显著性标记&#x…