Questions tagged «angular»

在Angular 1.x中，UI-Router是我的主要工具。通过返回对“ resolve”值的承诺，路由器只需在呈现指令之前等待承诺完成即可。 或者，在Angular 1.x中，空对象不会使模板崩溃-因此，如果我不介意暂时不完整的渲染，则可以$digest在promise.then()填充最初为空的模型对象之后使用渲染。 在这两种方法中，如果可能的话，我宁愿等待加载视图，如果无法加载资源，则取消路线导航。这为我节省了“取消导航”的工作。编辑：请注意，这特别意味着此问题要求使用Angular 2兼容或最佳实践的方法来执行此操作，并在可能的情况下要求避免使用“猫王运算符”！因此，我没有选择答案。 但是，这两种方法都无法在Angular 2.0中使用。肯定有为此计划或可用的标准解决方案。有谁知道它是什么？ @Component() { template: '{{cats.captchans.funniest}}' } export class CatsComponent { public cats: CatsModel; ngOnInit () { this._http.get('/api/v1/cats').subscribe(response => cats = response.json()); } } 以下问题可能反映了相同的问题：加载带有数据的PROMISE之后的Angular 2渲染模板。请注意，问题中没有代码或未接受的答案。

73 angular  promise  observable  dependency-resolver 

[64, 1]: space indentation expected [15, 27]: Missing semicolon [109, 36]: missing whitespace [111, 24]: missing whitespace [70, 1]: Consecutive blank lines are forbidden 我一直从TSLint收到这样的警告。有大量的警告，很难手动修复它。 我一直在寻找一种可以自动修复大多数警告的方法。

73 angular  typescript  warnings  tslint 

我正在Angular2应用程序上工作，我需要显示-但disable一个<a> HTML元素。正确的方法是什么？ 更新 请注意*ngFor，这会阻止使用选项，*ngIf而不是<a>完全渲染。 <a *ngFor="let link of links" href="#" [class.disabled]="isDisabled(link)" (click)="onClick(link)"> {{ link.name }} </a> 该打字稿组件有一个方法，看起来像这样： onClick(link: LinkObj) { // Do something relevant with the object... return false; } 我实际上需要防止元素被单击，而不仅仅是与CSS一起出现。我以为我首先需要潜在地绑定到该[disabled]属性，但这是不正确的，因为锚元素没有disabled属性。 我查看并考虑过使用，pointer-events: none但这妨碍了我的cursor: not-allowed工作方式－这是要求的一部分。

73 html  dom  typescript  angular  angular2-template 

我正在尝试在Angular Material中使用Datepicker组件。这是我的HTML代码： <input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled> <mat-datepicker #picker disabled="false"></mat-datepicker> 但是，它对我不起作用，并且出现以下错误： 错误：MatDatepicker：未找到DateAdapter的提供程序。 错误消息告诉我，我需要导入MatNativeDateModule和MatDatepickerModule，但是我已经做到了。这是我从app.module.ts下面的导入代码： import { MatFormFieldModule, MatMenuModule, MatCheckboxModule, MatIconModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material'; 还有什么我想念的吗？

73 javascript  angular  angular-material 

在VSCode中，当我添加以下类型的代码时，lint tslint会抱怨： serverId: number = 10; 并给出以下消息： [tslint]从数字文字中简单推断出的类型数字，删除类型注释（no-inferrable-types） 当我删除“数字”类型时，消息消失了。 为什么在此处包括类型信息是不好的做法？

73 angular  typescript  visual-studio-code 

我刚刚使用新的Angular CLI 6.0创建了一个新的Angular项目，但是我需要将Sass编译添加到我的项目中。我知道您可以在创建项目时设置标志，但是我的项目已经创建并且工作已经完成。 通过新的Angular CLI生成的新配置文件现在称为angular.json而不是angular-cli.json。文件的方案也有所不同，具有新的属性。 在过去angular-cli.json，您可以在其中设置stylExt类似的内容， "defaults": { "styleExt": "scss" } 但我不确定确切将其放置在何处，如"test"和"lint"属性之后，会出现以下错误： Matches multiple schemas when only one must validate. 建筑产生： Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt). 查看CLI的文档，我看不到任何指示放置位置的信息"styleExt"。 我还看到了其他一些建议：ng set defaults.styleExt scss抛出get/set have been deprecated in favor of the config command.。 …

72 angular  npm  sass  angular-cli 

我正在使用具有回调的javascript对象。触发回调后，我想在Angular2组件中调用一个函数。 示例HTML文件。 var run = new Hello('callbackfunction'); function callbackfunction(){ // how to call the function **runThisFunctionFromOutside** } <script> System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: {'js/app': {defaultExtension: 'ts'}} }); System.import('js/app/main') .then(null, console.error.bind(console)); </script> 我的App.component.ts import {Component NgZone} from 'angular2/core'; import {GameButtonsComponent} from './buttons/game-buttons.component'; @Component({ selector: 'my-app', template: ' …

72 angular 

我在父组件中有一个变量，子组件可能会更改它，而父组件将在视图中使用此变量，因此必须传播更改。 import {Component, View} from 'angular2/core'; @Component({selector: 'parent'}) @View({ directives: [Child], template: `<childcomp></childcomp>` }) class Parent { public sharedList = new Array(); constructor() { } } @Component({selector: 'child'}) @View({template: `...`}) class Child { constructor() { //access 'sharedList' from parent and set values sharedList.push("1"); sharedList.push("2"); sharedList.push("3"); sharedList.push("4"); } }

72 angular 

我们正在制作一个Angular2应用程序，我们希望能够以某种方式创建一个全局CSS变量（并在分配变量时每当更改时更新属性的值）。 我们使用Polymer已有一段时间（现在我们要切换到Angular2组件），并且使用CSS属性（Polymer具有一些polyfill），并且仅使用来更新样式Polymer.updateStyles()。 有什么方法可以实现类似的功能？ 编辑： 我们想要类似于Sasscolor: $g-main-color或CSS自定义属性的东西，color: var(--g-main-color)并且每当我们决定更改属性的值时（例如，类似updateVariable('g-main-color', '#112a4f')它的东西都会在任何地方动态更新值）。应用运行时的所有情况。 编辑2： 我想在CSS的不同部分（主机，子元素...）中使用一些全局CSS变量，并能够立即更改该值-因此，如果我更改my-color变量，它将在应用程序中随处更改。 我将使用Sass语法作为示例： :host { border: 2px solid $my-color } :host .some-label { color: $my-color } 可以使用类似Angular管道的东西吗？（但据说它仅适用于HTML） :host { border: 2px solid {{ 'my-color' | cssvariable }} } :host .some-label { color: {{ 'my-color' | cssvariable }} }

72 javascript  angular  dart  angular-dart 

我一直在玩弄角2在过去的几天，不知道是否有可能提供一个动态templateUrl的@View装饰。 我尝试过将其传递给一个函数并从中返回一个字符串，但是整个函数都变成了字符串。 我之前也没有真正使用过Angular 1.x，所以我不知道我是不是以错误的方式进行操作，但这是否可能，或者是否有更好的方法来创建动态视图？ 例如，如果用户未登录，我可能要显示一个表单，但如果用户登录，则要显示文本消息。 这样的事情不起作用： @Component({ selector: 'my-component' }) @View({ // This doesn't work templateUrl: function() { return this.isLoggedIn ? 'logged-in.html' : 'logged-out.html'; } }) class MyComponent { constructor() { this.loggedIn = false; } } 任何帮助，将不胜感激。

72 javascript  angular 

我的app.module.ts中有这个： import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { HttpModule, Http } from '@angular/http'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { EliteApi } from '../shared/shared'; import { MyApp } from './app.component'; import { MyTeams, Tournaments, TeamDetails, Teams, TeamHome, Standings } …

72 angular 

角度2中的空合并运算符（??）的等效项是什么？ 在C＃中，我们可以执行以下操作： string str = name ?? FirstName ?? "First Name is null";

72 angular  typescript  null-coalescing-operator 

我试图<mat-form-field>在使用Material2的Angular项目中使用，但是碰到了墙。 在下面获取错误消息。 Uncaught Error: Template parse errors: 'mat-form-field' is not a known element: 1. If 'mat-form-field' is an Angular component, then verify that it is part of this module. 2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR …

72 angular  typescript  angular-material2 

我只是有一个关于构造和处理服务中http请求的响应的问题。我正在使用Angular2.alpha46 Typescript（刚刚开始对其进行测试，我喜欢... Ps。 因此，请采取以下措施： login-form.component.ts import {Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2'; import {UserService} from '../../shared/service/user.service'; import {Router} from 'angular2/router'; import {User} from '../../model/user.model'; import {APP_ROUTES, Routes} from '../../core/route.config'; @Component({ selector: 'login-form', templateUrl: 'app/login/components/login-form.component.html', directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] }) export class LoginFormComponent { user: User; submitted: Boolean = false; constructor(private userService:UserService, private …

71 typescript  angular 

我有一个项目需要使用Angular2（最终版本）发布到旧的，旧的Tomcat 7服务器，该服务器使用.jsp页面提供某种类似于REST的API。 当项目只是一个执行AJAX请求的简单JQuery应用程序时，此方法就可以很好地工作。但是，该项目的范围已经扩大，因此需要使用更现代的框架来重写它。Angular2看起来很不错，但有一个例外：它拒绝使用任何选项执行POST请求，但不使用API​​不会提取的表单数据。该API希望所有内容都采用urlencode，依靠Java的request.getParameter("param")语法来提取各个字段。 这是从我的user.service.ts中摘录的： import { Injectable } from '@angular/core'; import { Headers, Response, Http, RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; @Injectable() export class UserService { private loggedIn = false; private loginUrl = 'http://localhost:8080/mpadmin/api/login.jsp'; private headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'}); constructor(private http: Http) {} …

71 javascript  angular