当前位置: 首页 > news >正文

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

相关文章:

Angular引用控件类

说明&#xff1a; angular 在一个控件类里面&#xff0c;引入另外一个控件类&#xff0c;这样做的好处&#xff0c;就是代码分离&#xff0c;当你一个页面存在多少类似于独立的界面时&#xff0c;可以使用这种方式&#xff0c;分离代码 更好维护程序 效果图&#xff1a; step…...

stm32 踩坑笔记

串口问题&#xff1a; 问题&#xff1a;会改变接收缓冲的下一个字节 串口的初始化如下&#xff0c;位长度选择了9位。因为要奇偶校验&#xff0c;要选择9位。但是接收有用数据只用到1个字节。 问题原因&#xff1a; 所以串口接收时会把下一个数据更改...

文件上传和文件包含

声明: 本文章只是适用于网络安全教学,请自觉遵守网络安全法,严禁用于非法途径,若读者做出来任何危害网络安全的行为,后果自负,均与本人无关. 文件上传&#xff1a; 大部分的网站和应用系统都有上传的功能&#xff0c;如用户头像上传&#xff0c;图片上传&#xff0c;文档上传…...

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十八集补充:制作空洞骑士独有的EventSystem和InputModule

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、制作空洞骑士独有的EventSystem和InputModule总结 前言 hello大家好久没见&#xff0c;之所以隔了这么久才更新并不是因为我又放弃了这个项目&#xff0c;而…...

yelp数据集上试验SVD,SVDPP,PMF,NMF 推荐算法

SVD、SVD、PMF 和 NMF 是几种常见的推荐算法&#xff0c;它们主要用于协同过滤和矩阵分解方法来生成个性化推荐。下面是对每种算法的简要介绍&#xff1a; 1. SVD&#xff08;Singular Value Decomposition&#xff09; 用途&#xff1a;SVD 是一种矩阵分解技术&#xff0c;通…...

计算机视觉常用数据集Cityscapes的介绍、下载、转为YOLO格式进行训练

我在寻找Cityscapes数据集的时候花了一番功夫&#xff0c;因为官网下载需要用公司或学校邮箱邮箱注册账号&#xff0c;等待审核通过后才能进行下载数据集。并且一开始我也并不了解Cityscapes的格式和内容是什么样的&#xff0c;现在我弄明白后写下这篇文章&#xff0c;用于记录…...

Flink和Spark在实时计算方面有何异同

Flink和Spark在实时计算方面既有相似之处&#xff0c;也存在显著的差异。以下是对它们之间异同的详细分析&#xff1a; 一、设计理念与世界观 Flink&#xff1a; 专注于流处理&#xff0c;认为批是流的特例。数据流分为有限流&#xff08;Bounded&#xff09;和无限流&#xf…...

纵然千万数据流逝,唯独vector长存

公主请阅 1.vector的一些方法1vector和stringpush_back 插入以及三种遍历数组的方式一些方法vector中的一些常见的方法1. push_back()2. pop_back()3. size()4. clear()5. empty()6. resize()7. insert()8. erase()9. at()10. front和 back()11. data()12. capacity()13. shrin…...

【LeetCode】【算法】739. 每日温度

LeetCode 739. 每日温度 题目描述 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0…...

2025年知识管理新方案:十款前沿知识库搭建工具详解

随着企业信息化和智能化的发展&#xff0c;知识管理已成为提升企业竞争力的关键要素。一个高效的知识库不仅能促进内部沟通&#xff0c;还能展示企业的专业形象。以下是2025年十款前沿知识库搭建工具的详解。 1. HelpLook AI知识库 HelpLook AI知识库是一款专注于为企业提供高…...

WebSocket实现消息实时推送

文章目录 websocket介绍特点工作原理 用websocket实现实时推送引入依赖WebSocket 函数定义变量声明初始化 WebSocket 连接WebSocket 连接的初始化和事件处理连接打开事件接收消息处理连接关闭和重连机制心跳机制使用 WebSocket代码完整显示 websocket介绍 WebSocket 是一种网络…...

flink 内存配置(三):设置JobManager内存

flink 内存配置&#xff08;一&#xff09;&#xff1a;设置Flink进程内存 flink 内存配置&#xff08;二&#xff09;&#xff1a;设置TaskManager内存 flink 内存配置&#xff08;三&#xff09;&#xff1a;设置JobManager内存 flink 内存配置&#xff08;四&#xff09;…...

蓝桥杯 Python组-神奇闹钟(datetime库)

神奇闹钟 传送门&#xff1a; 0神奇闹钟 - 蓝桥云课​​​​​​ 问题描述 小蓝发现了一个神奇的闹钟&#xff0c;从纪元时间&#xff08;1970 年 11 日 00&#xff1a;00&#xff1a;00&#xff09;开始&#xff0c;每经过 x 分钟&#xff0c;这个闹钟便会触发一次闹铃 (…...

解决阿里云三个月证书过期 免费SSL证书部署教程

相信有上线过自己的网站、小程序经验的同学深有体会&#xff0c;给服务加上 SSL 证书还挺麻烦的&#xff0c;尤其是没有运维经验的同学。本来最省事的方法是买个证书&#xff0c;但是一看价格&#xff0c;还是算了吧&#xff0c;动辄就是几万块一年。作为个人来说&#xff0c;这…...

VBA03-变量

一、什么是变量 变量是一个自定义名称的储存单位&#xff0c;变量是一个载体。 二、代码调试 在代码逐句运行的过程中查看变量的存储内容。 2-1、示例1 2-2、示例 三、变量的数据类型 若是定义的数据类型的变量&#xff0c;存储了超出了她范围的数&#xff0c;则会报溢出。 注…...

docker-ce-stable‘ 下载元数据失败 : Cannot download repomd.xml: Cannot download

看起来你在尝试安装 containerd.io-1.6.32 时遇到了问题&#xff0c;因为 docker-ce-stable 仓库的元数据下载失败。以下是一些可能的解决方案&#xff1a; 1. 检查仓库配置 确保你的 /etc/yum.repos.d/ 目录下的 docker-ce.repo 文件配置正确。你可以尝试手动编辑该文件&…...

C中定义字符串有下列几种形式

字符串常量&#xff0c;char数组&#xff0c;char指针之间的差异 1、字符串常量: 位于一对双括号中的任何字符。双引号里的字符加上编译器自动提供的结束标志\0字符&#xff0c;作为一个字符串存储在内存中。 例如&#xff1a; printf("%s","hello"); /…...

写一个小日历

以下是一个示例&#xff0c;展示了如何创建一个基本的日历 日历 1. HTML 结构 首先&#xff0c;创建一个基本的 HTML 结构&#xff0c;用于展示日历。 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta na…...

【数据库】elasticsearch

1、架构 es会为每个索引创建一定数量的主分片和副本分片。 分片&#xff08;Shard&#xff09;&#xff1a; 将索引数据分割成多个部分&#xff0c;每个部分都是一个独立的索引。 主要目的是实现数据的分布式存储和并行处理&#xff0c;从而提高系统的扩展性和性能。 在创建索…...

Rust 构建 TCP/UDP 网络服务

第四章 异步编程与网络通信 第二节 构建 TCP/UDP 网络服务 在现代应用程序中&#xff0c;网络通信是核心功能之一。本节将重点介绍如何在 Rust 中构建基本的 TCP 和 UDP 网络服务&#xff0c;涵盖实际的代码示例、最佳实践以及最新的技术方案&#xff0c;以帮助开发者掌握网络…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...