首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

更改ngOnInit中的元素更改路由时无效,但可以访问元素

问题描述: 更改ngOnInit中的元素更改路由时无效,但可以访问元素。

回答: 在Angular中,ngOnInit是一个生命周期钩子函数,用于在组件初始化时执行一些初始化操作。但是,当路由发生变化时,ngOnInit中的元素更改可能会无效,这是因为ngOnInit只在组件初始化时执行一次。

当路由发生变化时,Angular会重新创建组件实例,而不是重新初始化现有实例。因此,ngOnInit中的元素更改不会被应用到新创建的组件实例上。

要解决这个问题,可以使用Angular的路由事件来监听路由变化,并在路由变化时执行相应的操作。可以使用ActivatedRoute服务来订阅路由事件,并在回调函数中执行元素更改操作。

以下是一个示例代码:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  elementValue: string;

  constructor(private router: Router, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 在路由变化时执行元素更改操作
        this.elementValue = '新的值';
      }
    });
  }
}

在上面的示例中,我们使用了Router和ActivatedRoute服务来监听路由事件。当路由变化时,我们在回调函数中将元素的值更改为新的值。

这样,无论路由如何变化,都可以保证在路由变化时执行元素更改操作。

推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可弹性伸缩的云计算服务,提供了高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器实例,并根据实际情况进行弹性伸缩,以满足不同规模和负载的应用需求。

产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 从 Angular Route 中提前获取数据

    —\ntheme: fancy\n—\n\n### 介绍\n\n提前获取意味着在数据呈现在屏幕之前获取到数据。本文中,你将学到,在路由更改前怎么获取到数据。通过本文,你将学会使用 resolver, 在 Angular App 中应用 resolver,应用到一个公共的预加载导航。\n\n### 你为什么应该使用 Resolver\n\nResolver 在路由跟组件之间扮演着中间件服务的角色。假设你有一个表单,没有数据时,你想向用户一个空的表单,当在加载用户数据时展示一个 loader,然后当数据返回时,填充表单并隐藏 loader。\n\n通常,我们都会在组件的 ngOnInit() 钩子函数中获取数据。也就是说,组件加载完之后,我们发起数据请求。\n\n在 ngOnInit() 中操作,我们需要在每个需要的组件加载后,在其路由页面中添加 loader 展示。Resolver 可以简化 loader 的添加使用。你可以只添加一个适用于每个路由的 loader,而不是每个路由中都添加 loader。\n\n本文将结合示例来解析 resolver 的知识点。以便于你可以牢记它并在项目中使用它。\n\n### 在应用中使用 Resolver\n\n为了在应用中使用 resolver,你需要准备一些接口。你可以通过 JSONPlaceholder 来模拟,而不需要自己开发。\n\nJSONPlaceholder 是一个很棒的接口资源,你可以借助它更好学习前端的相关概念而不被接口所约束。\n\n现在,接口的问题解决了,我们可以开始 resolver 的应用了。一个 resolver 就是一个中间件服务,所以我们将创建一个服务。\n\nbash\n ng g s resolvers/demo-resolver --skipTests=true\n\n\n> –skipTests=true 跳过生成测试文件\n\nsrc/app/resolvers 文件夹中创建了一个服务。resolver 接口中有一个 resolve() 方法,它有两个参数:route(ActivatedRouteSnapshot 的实例)和 state(RouterStateSnapshot 的实例)。\n\nloader 通常是在 ngOnInit() 中编写所有的 AJAX 请求,但是逻辑将会在 resolver 中实现,替代 ngOnInit()。\n\n接着,创建一个服务来获取 JSONPlaceholder 中列表数据。然后在 resolver 中底调用,接着在路由中配置 resolve信息,(页面将会等待)直到 resolver 被处理。在 resolver 被处理之后,我们可以通过路由来获取数据然后展示在组件中。\n\n### 创建服务并编写逻辑获取列表数据\n\nbash\n ng g class models/post --skipTests=true\n\n\npost.ts\n\ntypescript\nexport class Post {\n id: number;\n title: string;\n body: string;\n userId: string;\n}\n\n\nmodel 就绪,是时候获取帖子 post 的数据了。\n\npost.service.ts\n\ntypescript\nimport { Injectable } from "@angular/core";\nimport { HttpClient } from "@angular/common/http";\nimport { Post } from "../models/post";\n\n@Injectable({\n providedIn: "root"\n})\nexport class PostsService {\n constructor(private _http: HttpClient) {}\n\n getPostList() {\n let URL = "https://jsonplaceholder.typicode.com/posts";\n return this._http.get<Post[]>(URL);\n }\n}\n\n\n现在,这个服务随时可被调用。\n\ndemo-resolver.service.ts\n\ntypescript\nimport { Injectable } from "@angular/core";\nimport {\n Resolve,\n ActivatedRouteSnapshot,\n RouterStateSnapshot\n} from "@angular/router";\nimport { PostsService } from "..

    03

    错误提示之(MVC3.0):HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检查以下 URL 并确保其拼写正确 MVC误设起始页

    MVC3.0框架开发项目: 有时在程序运行的时候会出现“HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检查以下 URL 并确保其拼写正确。”的错误提示。 在这里我们以运行时打开登录页面(login)为例, 一般情况下分为两种情况: 1、错误原因之:路由不正确。 解决方法:打开项目的“Global.asax”文件,找到路由注册(RegisterRoutes()) 方法,并将其中的路由中的控制器更改为“Login”,就行了。action方法一般情况下是选择

    06

    防治运营商HTTP劫持的终极技术手段

    运营商HTTP劫持(非DNS劫持)推送广告的情况相信大家并不陌生,解决的方法大多也是投诉增值业务部门进而投诉工信部。但这种方法费时费力,投诉接听人员并不了解情况导致答非所问的情况有很多,有时候不但受气最终也没能完全解决问题,或者解决问题后过了一段时间复发的情况并不少见。   近年来,运营商HTTP劫持非但没有收敛,反而变本加厉,玩出了新花样:比如通过HTTP劫持进行密码截获的活动;比如下载软件被替换的情况;比如劫持进行返利(当然返利不是返给你)的情况。   本文介绍一种技术手段用来防止HTTP劫持,在大多数情况下不但可以解决广告推送的问题,也能解决密码截获和下载软件被替换的情况。最终的效果是运营商停止了HTTP劫持,而非劫持后通过浏览器插件进行广告过滤。此种方法的好处是既不用安装浏览器插件进行广告过滤,也不用额外的服务器(HTTP代理或VPN之类的),并且能防止下载软件被替换和返利劫持,也能在一定程度上防范密码的泄漏。 防治运营商HTTP劫持的终极技术手段 我的博客:CODE大全:www.codedq.net;业余草:www.xttblog.com;爱分享:www.ndislwf.com或ifxvn.com。   要说明这种技术手段的工作原理,首先需要说明大多数情况下运营商HTTP劫持的原理:   在用户的浏览器连上被访问的网站服务器,发送了HTTP请求后,运营商的路由器会首先收到此次HTTP请求,之后运营商路由器的旁路设备标记此TCP连接为HTTP协议,之后可以抢在网站服务器返回数据之前发送HTTP协议的302代码进行下载软件的劫持,浏览器收到302代码后就会跳转到错误的软件下载地址下载软件了,随后网站服务器的真正数据到达后反而会被丢弃。或者,旁路设备在标记此TCP连接为HTTP协议后,直接返回修改后的HTML代码,导致浏览器中被插入了运营商的广告,随后网站服务器的真正数据到达后最终也是被丢弃。   从上述原理中看出,如果需要进行HTTP劫持,首先需要进行标记:如果是HTTP协议,那么进行劫持,否则不进行劫持。那么,是否有一种方法,既可以避免被旁路设备标记为HTTP协议,而目标网站收到的仍旧是原来的HTTP请求,并且不需要任何第三方服务器呢?答案是有的: 我的博客:CODE大全:www.codedq.net;业余草:www.xttblog.com;爱分享:www.ndislwf.com或ifxvn.com。   旁路设备中检测HTTP协议的模块通常比较简单,一般只会检测TCP连接建立后的第一个数据包,如果其是一个完整的HTTP协议才会被标记;如果并非是一个完整的HTTP协议,由于无法得到足够多的劫持信息,所以并不会被标记为HTTP协议(我们伟大的防火墙并非如此,会检查后续数据包,所以这种方法无效)。了解了这种情况后,防止劫持的方法就比较简单了:将HTTP请求分拆到多个数据包内,进而骗过运营商,防止了HTTP劫持。而目标网站的操作系统的TCP/IP协议栈比较完善,收到的仍旧是完整的HTTP请求,所以也不会影响网页浏览。   那么如何将浏览器发出的HTTP请求拆分到多个数据包中呢?我们可以在本地架设一个代理服务器,在代理服务器将浏览器的HTTP请求进行拆包,浏览器设置本地的代理服务器即可。我这里经过测试,默认设置的情况下对三大运营商(电信、联通、移动)的HTTP劫持现象都有很好的抑制作用。

    04
    领券