当前位置: 首页 > 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;以帮助开发者掌握网络…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...