Angular 组件开发——组件的创建与交互

于 2025-02-19 15:00:00 发布
阅读量59 收藏
点赞数
分类专栏： 前端大师之路：从入门到进阶 文章标签： angular.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43086723/article/details/145684378
版权

文章六：Angular 组件开发——组件的创建与交互

在 Angular 中，组件是构建用户界面的基本单元，它封装了视图（HTML）、样式（CSS）和逻辑（TypeScript）。深入理解组件的创建与交互对于开发高质量的 Angular 应用至关重要。下面我们来详细学习相关内容。

一、组件的创建

使用 Angular CLI 可以快速创建一个新的组件。在命令行中，进入项目目录并执行以下命令：

ng generate component user-profile

这会在 src/app 目录下创建一个名为 user-profile 的新组件，同时生成相关的文件，包括 .ts（组件逻辑）、.html（组件模板）、.css（组件样式）和 .spec.ts（组件测试）文件。

打开生成的 user-profile.component.ts 文件，默认内容如下：


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    



                



	

		

			

				
					
Angular4动态创建组件--根据组件名称动态创建出来组件

				
			

			

				

					xiaotuni的专栏,每天进步一点点 
				

				

					08-07
					
					2354
					
				

			

		

		

			
				
动态创建组件
说说场景先，比我写了一些组件，这此组件内容都很少，弹出的对话框也许只有一行数据，也有可能是一个表单等，或都一些多选的，单选的选项等。
网上有好多，动态创建组件的Demo，都不是很满意，愿意就是要动态创建组件的时候，传入的你即将要创建的组件对象进去，然后把这个放到页面里显示出来。这算什么动态创建呀，我就想传一个组件的名字，然后就能把他创建出来。
之前写过C#动态创建类，都是给一个类的名称

			
		

	



                

            
              



	

		

			

				
					
[Angular 基础] - Angular 渲染过程 & 组件的创建

				
			

			

				

					GoldenaArcher的博客
				

				

					02-03
					
					1678
					
				

			

		

		

			
				
之前的笔记为了推进度写的太笼统了（只有功能没有其他），当时学的时候知道是什么东西，但是学完后重新复习发现有些内容就记不清了，所以重新用自己的语言总结一下。

			
		

	



              


  
              

                


	

		

			

				
					
angular组件的制作与使用

					
最新发布

				
			

			

				

					听海边涛声
				

				

					08-13
					
					642
					
				

			

		

		

			
				
angular组件的制作与使用

			
		

	





	

		

			

				
					
angular相关知识点总结

				
			

			

				

					dc20200829的博客
				

				

					02-10
					
					1693
					
				

			

		

		

			
				
angular相关知识点总结

			
		

	



		

			
		



	

		

			

				
					
angularJS简介、环境搭建（脚手架）及组件创建

				
			

			

				

					mantou_riji的博客
				

				

					05-21
					
					1887
					
				

			

		

		

			
				
文章目录angularJS是什么angularJS的特点与Jquery的比较
angularJS是什么
jQuery是JS的一个函数库，而angularJS是Google开源的前端JS结构化框架。
官网：https://angular.cn/
离线手册下载：https://www.php.cn/xiazai/shouce/58
angularJS的特点

双线数据绑定
声明式依赖注入
解耦应用逻辑，数据模型和视图
完善的页面指令
定制表单验证
Ajax封装

与Jquery的比较

JS函数库
放入


.

			
		

	





	

		

			

				
					
Angular开发之——Angular介绍(01)

				
			

			

				

					我的博客
				

				

					05-13
					
					1358
					
				

			

		

		

			
				
Angular是什么AngularJS和Angular关系Angular特性Angular的发展历史Angular学习建议more。

			
		

	





	

		

			

				
					
angular中的组件交互

				
			

			

				

					m0_54944506的博客
				

				

					01-06
					
					870
					
				

			

		

		

			
				
在用angular前端中，组件之间的交互十分重要，该篇文件将会对angular框架中组件交互的方式进行一个汇总
组件交互大概分为五种类型
1.@input 父传子
2.@Output 子传父
3.本地变量
4.@viewChild
5.服务
@input 父传子
父子组件的交互是开发中比较常见的，大家用的也比较熟练，但还是统一记一下吧，就当是复习了
父传子时 传引用类型的数据时，在子组件发生改变后，父组件也会发生改变；值类型的数据不会发生变化
父传子 会用到@Input 装饰器
父组件
//模板
<a

			
		

	





	

		

			

				
					
Angular如何创建一个组件

				
			

			

				

					weixin_45679977的博客
				

				

					12-27
					
					1560
					
				

			

		

		

			
				
一、创建组件(创建一个headers的组件)
命令: ng g c headers
命令: ng g c /component/headers   (带路径的)
二、appmodule.ts中直接引用(HeadersComponent)这个名字必须是有Component
import { HeadersComponent } from ‘./compontents/headers/headers....

			
		

	





	

		

			

				
					
Angular中新建组件

				
			

			

				

					weixin_43799793的博客
				

				

					08-09
					
					509
					
				

			

		

		

			
				
Angular中新建组件
执行命令：
ng g c headers    不带路径
ng g c /component/element(组件名)  //带路径

一起共生成4个文件。
例：
element.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-element',
  templateUrl: './element.component.html',
  sty

			
		

	





	

		

			

				
					
angular组件

				
			

			

				

					09-06
				

			

		

		

			
				
angular新建组件及组件复用，模板语法，ng g c helloworld! 双向数据绑定，angular注解，使用terminal命令启动项目

			
		

	





	

		

			

				
					
Angular笔记：新建组件（手动创建和指令创建）

				
			

			

				

					Amoyensis的博客
				

				

					10-27
					
					2764
					
				

			

		

		

			
				
本篇笔记将使用两种方法新建组件，实现如下功能：







手动创建

首先在src/app目录下新建文件，格式为【组件名.component.ts】，比如我的是courses.component.ts



在courses.component.ts文件中编写代码


import { Component } from '@angular/core';

@Component({
    selector: 'courses', //<courses>
    template: '<

			
		

	





	

		

			

				
					
【Angular 学习】第二天：快捷命令创建组件

				
			

			

				

					Dai的博客
				

				

					02-15
					
					1379
					
				

			

		

		

			
				
【Angular 学习】第二天：快捷命令创建组件

			
		

	





	

		

			

				
					
Angular2——创建组件

				
			

			

				

					海棠不惜胭脂色，独立蒙蒙细雨中
				

				

					02-25
					
					2040
					
				

			

		

		

			
				
一、页面规划： 
针对公司项目需要，做一个列表查询页，前期主要涉及页面，讨论应该显示的内容，根据用户需求需要设计几个按钮，根据哪几个字段查询最为合理，易用。

二、使用Angular创建组件： 
ng g component pub-training-plan

三、创建结果： 


创建完成后的文件有css,html,ts,spec.ts四个文件，css写样式，html写静态页面，ts写js代码...

			
		

	





	

		

			

				
					
新建一个angular项目后，创建组件及配置路由

				
			

			

				

					weixin_41844140的博客
				

				

					11-17
					
					7590
					
				

			

		

		

			
				
其实这些步骤angular官网上写的很详细，可以去官网看哦～
1.  创建一个新的angular项目
ng new appname --name appname

2.  创建路由配置文件
ng generate module app-routing --flat --module=app

生成的 app-routing.module.ts 和 app-routing.module.spec.t...

			
		

	





	

		

			

				
					
【Angular】Angular开发组件

				
			

			

				

					千千
				

				

					04-24
					
					1469
					
				

			

		

		

			
				
使用Angular开发组件的全部过程如下：


一：新建组件
在命令行输入: ng g component 组件名
新生成的组件，在src的app里面




在app.module.ts文件的装饰器下，自动声明了刚才新添加的组件




二、应用组件
可以在app.component.html里面，应用新创建的组件




三、编辑组件里面的html、c

			
		

	





	

		

			

				
					
Angular4.x 相关命令行

				
			

			

				

					我竟然是凡人
				

				

					12-25
					
					1083
					
				

			

		

		

			
				
Angualr CLI提供了许多常用命令供我们选择：
ng generate class my-new-class              // 新建 class
ng generate component my-new-component      // 新建组件
ng generate directive my-new-directive      // 新建指令
ng generate

			
		

	





	

		

			

				
					
【Angular4】基础（二）：创建组件 Component

					
热门推荐

				
			

			

				

					'Ablaze 的专栏
				

				

					03-05
					
					1万+
					
				

			

		

		

			
				
创建一个组件很简单，比如我们创建一个 card 组件：



ng g c card

这里我使用的是 Angular CLI 脚手架，当然你要是不觉得麻烦，也可以一个个文件建。

不过！要提醒一点，当使用 ng 创建时，会将创建的组件、服务这些自动添加到 app/app.module.ts 中，如果你是手动创建的话一定要记得在模块中写入你创建的。

现在来看下 app/card/card.com...

			
		

	





	

		

			

				
					
AngularJS组件化--让开发更简单

				
			

			

				

					nuanxiasuiyuan的博客
				

				

					04-27
					
					2437
					
				

			

		

		

			
				
AngularJS--组件化
什么是组件化？
组件化是将页面中一部分UI分装起来进行重复使用，UI中的数据是可以不同的，甚至组件中可以对UI进行适当的业务逻辑处理，如链接跳转、数据运算。


代码：定义组件基础语法结构var app=angular.module("pageHeader",[]);
app.component("组件名字",{
    template:"欢迎您尊敬的用户

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值