Questions tagged «angular»

我有一个父组件（CategoryComponent），一个子组件（videoListComponent）和一个ApiService。 我的大部分工作都很好，即每个组件都可以访问json api并通过可观察对象获取其相关数据。 目前，视频列表组件仅获取所有视频，我想将其过滤为特定类别中的视频，我是通过将categoryId传递给子对象来实现的@Input()。 CategoryComponent.html <video-list *ngIf="category" [categoryId]="category.id"></video-list> 这可以正常工作，并且当父CategoryComponent类别更改时，categoryId值将通过传递，@Input()但是我需要在VideoListComponent中进行检测，然后通过APIService（带有新的categoryId）重新请求视频数组。 在AngularJS中，我会$watch在变量上做一个。处理此问题的最佳方法是什么？

468 angular  angular2-changedetection 

更新到Angular 6.0.1后，出现以下错误ng serve： Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName". Error: Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName". at Object.resolve (/home/Projects/myProjectName/node_modules/@angular-devkit/core/node/resolve.js:141:11) at Observable.rxjs_1.Observable [as _subscribe] (/home/Projects/myProjectName/node_modules/@angular-devkit/architect/src/architect.js:132:40) ng update说一切都井井有条。删除node_modules文件夹和全新npm install安装也无济于事。 我的项目基于ng2-admin（Angular4版本）。这是我的package.json依赖项： "dependencies": { "@angular/animations": "^6.0.1", "@angular/common": "^6.0.1", "@angular/compiler": "^6.0.1", "@angular/core": "^6.0.1", "@angular/forms": "^6.0.1", "@angular/http": "^6.0.1", "@angular/platform-browser": "^6.0.1", "@angular/platform-browser-dynamic": "^6.0.1", "@angular/platform-server": "^6.0.1", …

446 angular  angular-cli  angular6  angular-cli-v6 

@Component和@DirectiveAngular有什么区别？他们两个似乎完成相同的任务，并具有相同的属性。 用例是什么？何时优先使用一个？

441 angular 

我已经在Angular 2中构建了一个基本应用程序，但是遇到一个奇怪的问题，即我无法将服务注入我的组件之一。但是，它可以很好地注入我创建的其他三个组件中的任何一个。 对于初学者，这是服务： import { Injectable } from '@angular/core'; @Injectable() export class MobileService { screenWidth: number; screenHeight: number; constructor() { this.screenWidth = window.outerWidth; this.screenHeight = window.outerHeight; window.addEventListener("resize", this.onWindowResize.bind(this) ) } onWindowResize(ev: Event) { var win = (ev.currentTarget as Window); this.screenWidth = win.outerWidth; this.screenHeight = win.outerHeight; } } 以及它拒绝使用的组件： import { …

431 angular  angular2-di 

我希望检测到我的路线更改AppComponent。 此后，我将检查全局用户令牌以查看他是否已登录。然后，如果用户未登录，我可以重定向该用户。

427 angular 

对于在迭代对象时如何在angular2中获取key和value的对象，我有些困惑*ngFor。我知道在angular 1.x中有一种语法 ng-repeat="(key, value) in demo" 但是我不知道如何在angular2中做同样的事情。我尝试过类似的尝试，但没有成功： <ul> <li *ngFor='#key of demo'>{{key}}</li> </ul> demo = { 'key1': [{'key11':'value11'}, {'key12':'value12'}], 'key2': [{'key21':'value21'}, {'key22':'value22'}], } 这是我尝试的plnkr：http ://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview 如何获得key1和key2动态使用*ngFor？经过广泛搜索之后，我发现了使用管道的想法，但是我不知道该怎么做。在angular2中是否有用于执行相同操作的内置管道？

425 angular  typescript  object 

我想将select元素绑定到对象列表-这很容易： @Component({ selector: 'myApp', template: `<h1>My Application</h1> <select [(ngModel)]="selectedValue"> <option *ngFor="#c of countries" value="c.id">{{c.name}}</option> </select>` }) export class AppComponent{ countries = [ {id: 1, name: "United States"}, {id: 2, name: "Australia"} {id: 3, name: "Canada"}, {id: 4, name: "Brazil"}, {id: 5, name: "England"} ]; selectedValue = null; } 在这种情况下，似乎selectedValue是一个数字-所选项目的ID。 但是，我实际上想绑定到country对象本身，所以它selectedValue是对象，而不仅仅是id。我试图像这样更改选项的值： …

409 html  angular 

我正在编写一个具有属性的Angular组件Mode(): string。 我希望能够以编程方式设置此属性，而不响应任何事件。 问题在于，在没有浏览器事件的情况下，模板绑定{{Mode}}不会更新。 有没有办法手动触发此更改检测？

387 angular  angular2-changedetection 

我试图了解Angular（有时称为Angular2 +），然后发现@Module： 进口货 声明书 提供者 遵循Angular快速入门

387 angular  angular-module 

我正在使用Angular 2（TypeScript）。 我想对新选择进行某些操作，但是我得到的onChange()总是最后一个选择。如何获得新选择？ <select [(ngModel)]="selectedDevice" (change)="onChange($event)"> <option *ngFor="#i of devices">{{i}}</option> </select> onChange($event) { console.log(this.selectedDevice); // I want to do something here with the new selectedDevice, but what I // get here is always the last selection, not the one I just selected. }

372 angular  typescript 

有没有一种聪明的方法可以返回Angular 2的最后一页？ 就像是 this._router.navigate(LASTPAGE); 例如，页面C有一个Go Back按钮， 页面A->页面C，单击它，回到页面A。 页面B->页面C，单击它，返回页面B。 路由器是否有此历史记录信息？

366 angular  angular2-routing 

从angular 4.4升级到5.0之后，并且将所有HttpModule和Http更新到HttpClientModule之后，我开始出现此错误。 我还再次添加了HttpModule以确保它不是由于某种依赖性，但不能解决问题 在app.module中，我都正确设置了 import { HttpModule } from '@angular/http'; import { HttpClientModule, HttpClient } from '@angular/common/http'; . . . @NgModule({ imports: [ BrowserModule, HttpClientModule, HttpModule, BrowserAnimationsModule, FormsModule, AppRoutingModule, . . . 我不知道该错误从何而来，或者我不知道如何获取该错误的内在信息。我也有一个警告（也放在下面）可能与它有关。 Error: StaticInjectorError[HttpClient]: StaticInjectorError[HttpClient]: NullInjectorError: No provider for HttpClient! at _NullInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5665) at resolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5953) at tryResolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5895) …

360 angular 

我究竟做错了什么？ import {bootstrap, Component} from 'angular2/angular2' @Component({ selector: 'conf-talks', template: `<div *ngFor="let talk in talks"> {{talk.title}} by {{talk.speaker}} <p>{{talk.description}} </div>` }) class ConfTalks { talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'}, {title: 't2', speaker: 'Julie', description: 'talk 2'}]; } @Component({ selector: 'my-app', directives: [ConfTalks], template: '<conf-talks></conf-talks>' }) …

354 angular  angular2-directives 

我正在尝试在Angular 2项目中使用Angular Material Autocomplete组件。我将以下内容添加到模板中。 <md-input-container> <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl"> </md-input-container> <md-autocomplete #auto="mdAutocomplete"> <md-option *ngFor="let state of filteredStates | async" [value]="state"> {{ state }} </md-option> </md-autocomplete> 以下是我的组件。 import {Component, OnInit} from "@angular/core"; import {ActivatedRoute, Router} from "@angular/router"; import {FormControl} from "@angular/forms"; @Component({ templateUrl: './edit_item.component.html', styleUrls: ['./edit_item.component.scss'] }) export class EditItemComponent …

354 angular  typescript  angular-material2  angular-forms 

捆绑Angular（版本2、4、6，...）以在实时Web服务器上进行生产的最佳方法是什么。 请在答案中包括Angular版本，以便在移至更高版本时可以更好地进行跟踪。

353 angular  webpack  systemjs  angular-cli