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

在AppComponent构造函数中添加OAuthService后,UI不工作

是因为OAuthService的引入可能导致依赖注入的问题或者在构造函数中出现了错误。

解决这个问题的步骤如下:

  1. 检查依赖注入:确保在AppComponent的构造函数中正确注入了OAuthService。可以通过在构造函数参数中添加private oauthService: OAuthService来实现。同时,检查是否在模块的providers数组中正确地声明了OAuthService。
  2. 检查构造函数中的错误:检查构造函数中是否存在其他错误,例如语法错误、未导入所需的模块等。确保OAuthService的依赖项都正确地导入和声明。
  3. 检查OAuthService的初始化:在AppComponent构造函数中添加OAuthService后,需要确保正确初始化OAuthService。通常,OAuthService需要通过调用其方法或设置其属性来进行配置。例如,你可以调用this.oauthService.configure(config)来配置OAuthService的参数,其中config是一个包含所需配置的对象。
  4. 检查相关的UI代码:在添加OAuthService后,可能需要对UI代码进行相应的更改。检查是否有与OAuthService相关的UI逻辑,例如用户登录、身份验证等。确保这些逻辑正确处理和使用OAuthService提供的功能。

总结起来,UI不工作的问题很可能是由于OAuthService的引入和配置导致的依赖注入问题或代码错误。通过检查依赖注入、构造函数、OAuthService的初始化和相关的UI代码,可以解决这个问题。具体的解决方法需要根据你所使用的具体框架和代码进行调整。

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

相关·内容

  • AngularDart4.0 英雄之旅-教程-06服务 顶

    然而,定义英雄不是组件的工作,你不能轻易与其他组件和视图共享英雄名单。 在这个页面,您将把英雄数据采集业务转移到一个提供数据的服务,并与需要数据的所有组件共享该服务。...注入HeroService 而不是使用新的表达式,添加这些行: 添加一个私人的HeroService属性。 添加一个初始化私有属性的构造函数。 将HeroService添加到组件的提供程序元数据。...您可能会试图构造函数调用getHeroes()方法,但构造函数不应包含复杂的逻辑,特别是调用服务器的构造函数(如数据访问方法)。 构造函数用于简单的初始化,如将构造函数参数连接到属性。...“Lifecycle Hooks”页面详细了解生命周期挂钩。 将OnInit添加到由AppComponent实现的接口列表,并使用里面的初始化逻辑编写一个ngOnInit()方法。...有关异步函数的更多信息,请参阅Dart语言浏览声明异步函数。 处理Future 由于对HeroService的更改,应用程序组件的英雄属性现在是Future,而不是英雄列表。

    2.9K10

    AngularDart4.0 高级-属性(Attribute)指令 顶

    现在在AppComponent引用此模板,并将Highlight指令添加到指令列表。 当Angular模板遇到myHighlight时,就会识别该指令。...你的指令工作? 你记得设置@Component的指令属性吗?很容易忘记!...它创建了一个HighlightDirective类的实例,并将元素的引用注入到指令的构造函数,该构造函数将元素的背景样式设置为黄色。...处理程序委托给一个帮助器方法,该方法设置DOM元素_el的颜色,构造函数声明并初始化它。...编码完成,下方演示应该如何工作。 ? 写一个函数指令 一个函数指令是一个无状态的指令。 您可以通过使用@Directive()注解一个公共的顶级函数来创建一个函数指令。

    3.2K10

    Angular constructor vs ngOnInit

    constructor ES6 中就引入了类,constructor(构造函数)是类的特殊方法,主要用来做初始化操作,进行类实例化操作时,会被自动调用。...因为 ChildComponent 组件的构造函数会优先执行,当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子,然后调用 ngOnInit 钩子方法,所以...constructor 应用场景 Angular 构造函数一般用于依赖注入或执行一些简单的初始化操作。...= 'Semlinker'; // 执行数据初始化操作 } } ngOnInit 应用场景 项目开发我们要尽量保持构造函数简单明了,让它只执行简单的数据初始化操作,因此我们会把其他的初始化操作放在...AppComponent; }()); AppComponent.type = 'component'; 通过转换的代码,我们可以知道类的静态属性是属于 AppComponent 构造函数的,而成员属性是属于

    1.4K20

    Webpack实战-构建同构应用

    为了解决以上问题,有人提出能否将原本只运行在浏览器的 JavaScript渲染代码也服务器端运行,服务器端渲染出带内容的 HTML 再返回。...需要更新 DOM 时直接操作 DOM 树,而是通过更新 JavaScript Object 再映射成 DOM 操作。...react-dom 渲染虚拟 DOM 树时有2方式可选: 通过 render() 函数去操作浏览器 DOM 树来展示出结果。...构建同构应用的最终目的是从一份项目源码构建出2份 JavaScript代码,一份用于浏览器端运行,一份用于 Node.js 环境运行渲染出 HTML。...需要通过 CommonJS 规范导出一个渲染函数,以用于 HTTP 服务器中去执行这个渲染函数,渲染出 HTML 内容返回。

    97410

    【Angular专题】——(2)【译】Angular的ForwardRef

    问题点在哪里 先做一个小声明,我们现在拥有一个AppComponent,并使用DI系统向其中注入了一个NameService,因为我们使用的是Typescript,所以需要做的工作就是构造函数的参数声明变量...Make sure they all have valid type or annotations 错误信息显示,AppComponent构造函数在被调用时,同一个文件声明的NameService...这个错误提示是合理的,因为我们定义NameService之前就在AppComponent构造函数中使用了它,但是另一方面来看,普通的ES5代码中就不会出现报错,因为函数声明会被Js解释器提升至作用域头部...从上面的示例不难看出,如果Javascript解释器对class声明也进行提升处理,就容易类继承时出现基类未定义的错误。 三. class使用前必须声明吗?...小结 这个场景并不会经常出现,一般它只在当我们想要注入同一个文件声明的类时才会发生,大多数情况下我们一个文件只会声明一个类,并且会在文件的头部引入其他依赖的类,以此来保证不会被class不进行变量提升的特性造成困扰

    3.2K20

    Webpack实战-构建同构应用

    为了解决以上问题,有人提出能否将原本只运行在浏览器的 JavaScript渲染代码也服务器端运行,服务器端渲染出带内容的 HTML 再返回。...需要更新 DOM 时直接操作 DOM 树,而是通过更新 JavaScript Object 再映射成 DOM 操作。...react-dom 渲染虚拟 DOM 树时有2方式可选: 通过 render() 函数去操作浏览器 DOM 树来展示出结果。...构建同构应用的最终目的是从一份项目源码构建出2份 JavaScript代码,一份用于浏览器端运行,一份用于 Node.js 环境运行渲染出 HTML。...需要通过 CommonJS 规范导出一个渲染函数,以用于 HTTP 服务器中去执行这个渲染函数,渲染出 HTML 内容返回。

    1.5K60

    Angular 从入坑到挖坑 - HTTP 请求概览

    , HttpClientModule // 添加到根应用模块 ], providers: [], bootstrap: [AppComponent] }) export class...@Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类...执行服务的方法时,有时会存在没有回调函数的情况,此时也必须执行 subscribe 方法,否则服务的 HTTP 请求是没有真正发起的 服务的 getAntiMotivationalQuotes...4.2.2、请求重试 某些情况下存在因为特殊原因导致短时间的请求失败,这时可以 pipe 管道,当请求失败,使用 retry 方法进行多次的请求重试,进行了多次重试还是无法进行数据通信,则进行错误捕获...4.3、请求和响应拦截 向服务器发起请求时,一般是需要我们在请求头中添加上授权的 token 信息,与其当后端接口返回我们无权访问时再来处理,是不是可以发起请求前去进行拦截判断,如果包含 token

    5.3K10

    《重构-代码整洁之道TypeScript版》第4天

    ) [ ] Parameterize Method(令函数携带参数) [ ] Preserve Whole Object(保持对象完整) [ ] Pull Up Constructor Body(构造函数本体上移...(以多态取代条件表达式) [ ] Replace Constructor with Factory Method(以工厂函数取代构造函数) [ ] Replace Data Value with Object...:你有一些数据置身在GUI控件(HTML页面),而领域函数服务端、NW开发的PC端等)需要访问这些数据。...:让一个函数返回该集合的一个只读副本,并在这个类中提供添加、移除集合元素的函数。 动机?:我们常常会在一个类中使用集合(Map、Set、Array),通常这样的类也会提供针对该集合的取值、设值函数。...这个时候,取值函数不应该返回集合本身,因为这样会让用户得以修改集合内容而集合拥有者缺一无所知,这样也会暴露过多对象内部数据结构的信息。另外设置函数不应该提供添加修改和移除的操作,但不能直接重写该集合。

    40410

    AngularDart4.0 指南- 显示数据 顶

    当您使用AppComponent类(web / main.dart)引导时,Angular将在index.html查找,查找它,实例化AppComponent...模板中使用任何Angular指令之前,您需要将它们列组件的@Component注解的指令参数。...(this.id, this.name); @override String toString() => '$id: $name'; } 您已经使用构造函数,两个属性(id和name)和toString...使用Hero类 导入Hero类AppComponent.heroes属性可以返回一个Hero对象的类型列表:lib/app_component.dart (heroes) List heroes...它正在添加和删除DOM的段落元素。 这可以提高性能,特别是大型项目中,当有条件地包含或排除大量的HTML与许多数据绑定。 试试看。 由于列表中有四个项目,所以应该显示消息。

    5.3K10

    Angular JSONP 详解

    二、JSONP 跨域原理 AJAX 无法跨域是受到 “同源策略” 的限制,但是带有 src 属性的标签(例如 、、)是不受该策略限制的,因此我们可以通过向页面动态添加...接着经过一小段时间,控制台输出了相关的数据。 四、Angular JSONP 原理简析 了解 JSONP 的工作原理之后,再看 Angular 的源码就清晰简单很多。... Angular HttpClient 拦截器 这篇文章,我们已经介绍了拦截器的作用与使用。...JsonpClientBackend 类的构造函数,我们注入了 JsonpCallbackContext 和 document 对象,其中 JsonpCallbackContext Provider...onLoad 和 onError 回调函数,都调用 cleanup() 函数执行清理操作,该函数的实现如下: const cleanup = () => { // Remove the <script

    2.3K41

    Angular 2 JavaScript 环境配置(下)

    模块 Angular应用都是模块化的,ES5没有内置的模块化系统,可以使用第三方模块系统,然后我们为应用创建独立的命名空间 app,文件代码可以包裹在 IIFE(立即执行函数表达式): (function...大部分应用文件通过app命名空间上添加东西来输出代码,我们app.component.js文件输出了AppComponent。...app.AppComponent = Class定义对象 本实例AppComponent类只有一个空的构造函数: .Class({     constructor: function() {} });...当Angular宿主HTML遇到一个my-app元素时它创建并显示一个AppComponent实例。 template 属性容纳着组件的模板。...---- 添加 NgModule Angular 应用由 Angular 模块组成,该模块包含了 Angular 应用所需要的组件及其他任何东西。

    70830

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    您可以通过编辑prefix属性将其更改为首选项的前缀.angular-cli.json,因此ng generate首次使用前最好先这样做。 所以,我们有一个组件的构造ngOnInit函数和一个函数。...但在基本层面上,请考虑如下这些方法:创建组件之后立即调用构造函数传递给它的数据准备好并填充之前很久才调用该构造函数,而ngOnInit仅在第一个更改周期数据,因此您可以访问组件输入。...我们很快会讨论输入和组件通信,但现在,我们只需要记住,最好使用常量的构造函数,比如实际上被硬编码到组件ngOnInit的东西,以及依赖于外部的所有东西数据。...首先,我们构造函数中使用FormBuilder的依赖注入,并用它构建表单。...也许我们可以将我们之前的API集成添加到我们的Reducer?但是我们不能,因为我们的Reducer函数应该是一个纯函数

    42.6K10

    (转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

    ,当 Angular 组件模板遇到 input 或 textarea DOM 原生控件时,会使用DefaultValueAccessor 指令: @Component({ selector:...= new FormControl(3); } 所有表单指令,包括上面代码的 formControl 指令,都会调用 setUpControl 函数来让表单控件和DefaultValueAccessor...实现交互(译者注:意思就是上面代码绑定的 formControl 指令,在其自身实例化时,会调用 setUpControl() 函数给同样绑定到 input的 DefaultValueAccessor...为了运行程序我们需要加入 jQuery 相关依赖,简化起见, index.html 添加全局依赖: <script src="https://code.jquery.com/jquery-3.2.1...<em>在</em>registerOnChange 里我们简单保存了对回调<em>函数</em> fn 的引用,回调<em>函数</em>是由 formControl 指令传入的(译者注:参考 L85),只要每次 slider 组件值发生改变,就会触发这个回调<em>函数</em>

    3.8K20

    Angular ElementRef 简介

    ,因为 web worker 环境,是不能直接操作 DOM。...首先我们要先获取 div 元素,文中 “ElementRef 的作用” 部分,我们已经提到可以利用 Angular 提供的强大的依赖注入特性,获取封装的 native 元素。...浏览器 native 元素就是 DOM 元素,我们只要先获取 my-app元素,然后利用 querySelector API 就能获取页面 div 元素。...没有抛出异常,我们可以推断 this.elementRef.nativeElement 这个对象是存在,但却找不到它的子元素,那应该是调用构造函数的时候,my-app 元素下的子元素还未创建。...{ name: string = 'Semlinker'; // 构造函数 this.elementRef = elementRef 是可选的,编译时会自动赋值 // function

    1.6K60
    领券