Angular 监听服务

监听服务

      语法:$scope.$watch(‘要监听的数据',function(n,o){})

      说明:①.这个服务是$scope作用域对象上的一个方法,不需要单独注入

                 ②.这个方法能监听页面中任何数据的改变,监听时会保存监听对象的旧值和新值。

     作用:监听数据改变后 触发事件


     <input type="text" ng-model='msg'>
     <p>{{msg}}</p>
 
    <script>
        var app=angular.module('app',[]);
        // 监听 服务
        app.controller('main',['$scope','$location',function($scope,$location){
                // $scope.msg='';
                // //监听数据改变
                // $scope.$watch('msg',function(n,old){
                //     console.log(n,old);
                // }) 

                //location
                console.log($location);
                console.log($location.$$absUrl);
                console.log($location.absUrl());
        }])

    </script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本
Angular中,可以使用以下两种方法来监听事件: 1. 使用@Output装饰器和EventEmitter类来创建自定义事件。在子组件中,使用EventEmitter类来触发自定义事件,然后在父组件中使用@Output装饰器来监听该事件。 例如,在子组件中定义一个名为myEvent的自定义事件: ```typescript import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'child-component', template: '<button (click)="onClick()">Click me!</button>' }) export class ChildComponent { @Output() myEvent = new EventEmitter<string>(); onClick() { this.myEvent.emit('Event triggered!'); } } ``` 然后在父组件中监听该事件: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'parent-component', template: '<child-component (myEvent)="onMyEvent($event)"></child-component>' }) export class ParentComponent { onMyEvent(event: string) { console.log(event); } } ``` 2. 使用RxJS中的Subject类来创建可观察对象,然后在组件中订阅该可观察对象以监听事件。 例如,在组件中定义一个名为mySubject的Subject对象: ```typescript import { Component } from '@angular/core'; import { Subject } from 'rxjs'; @Component({ selector: 'my-component', template: '<button (click)="onClick()">Click me!</button>' }) export class MyComponent { mySubject = new Subject<string>(); onClick() { this.mySubject.next('Event triggered!'); } } ``` 然后在组件中订阅该可观察对象以监听事件: ```typescript import { Component } from '@angular/core'; import { MyComponent } from './my.component'; @Component({ selector: 'app-root', template: '<my-component></my-component>' }) export class AppComponent { constructor(private myComponent: MyComponent) { myComponent.mySubject.subscribe(event => console.log(event)); } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值