Questions tagged «angular»

我在Angular 2中有一个名为my-comp的组件： <my-comp></my-comp> 如何在Angular 2中设置此组件的宿主元素的样式？ 在Polymer中，您将使用“：host”选择器。我在Angular 2中尝试过。但是它不起作用。 :host { display: block; width: 100%; height: 100%; } 我也尝试使用组件作为选择器： my-comp { display: block; width: 100%; height: 100%; } 两种方法似乎都不起作用。 谢谢。

189 css  angular  css-selectors  angular-components 

在遍及全球互联网的蜿蜒曲折中，尤其是在angular.io样式文档中，我发现了许多对@HostBinding和的引用@HostListener。看来它们是非常基础的，但不幸的是，目前针对它们的文档还有些粗略。 谁能解释一下它们是什么，它们如何工作并给出用法示例？

188 angular  angular-services 

Angular 2提供了@ViewChild，@ViewChildren，@ContentChild和@ContentChildren用于查询一个组件的派生元素装饰器。 前两个和后两个有什么区别？

188 angular 

我不知道如何添加到我的组件 <component></component> html（component.html）内动态类属性。 我发现的唯一解决方案是通过“ ElementRef”本机元素修改项目。该解决方案似乎做起来应该很简单，有点复杂。 另一个问题是必须在组件范围之外定义CSS，这会破坏组件封装。 有没有更简单的解决方案？像<root [class]="..."> .... </ root>模板里面的东西。

187 angular  angular2-template 

角度2-如何使用导航到另一条路线this.router.parent.navigate('/about')。 它似乎不起作用。我尝试了，location.go("/about");因为那没有用。 基本上，一旦用户登录，我想将他们重定向到另一个页面。 这是我的代码如下： import {Component} from 'angular2/angular2'; import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2'; import {Router} from 'angular2/router'; import {AuthService} from '../../authService'; //Model class User { constructor(public email: string, public password: string) {} } @Component({ templateUrl:'src/app/components/todo/todo.html', directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] }) export class Todo { model = new User('Mark@gmail.com', 'Password'); authService:AuthService; router: …

186 angular  typescript  angular2-routing 

看一下angular2代码示例，我们看到一些带有$符号的公共属性： <....> private missionAnnouncedSource = new Subject<string>(); private missionConfirmedSource = new Subject<string>(); // Observable string streams missionAnnounced$ = this.missionAnnouncedSource.asObservable(); missionConfirmed$ = this.missionConfirmedSource.asObservable(); <....> 谁能解释： 为什么使用$（此符号背后的原因是什么？始终将其用于公共财产）？ 使用公共属性，但不使用方法（例如，missionAnnouncements（），missionConfirmations（））-同样，这是ng2应用的约定吗？ 官方样式指南中似乎没有关于此的任何内容？

184 angular 

我一直在看视频和阅读文章，但是这篇特定的文章让我很困惑，在文章开头 Angular中的应用程序遵循模块化结构。Angular应用程序将包含许多模块，每个模块都专用于一个用途。通常，模块是一组内聚的代码，与其他模块集成在一起以运行Angular应用程序。 模块从其代码中导出一些类，函数和值。组件是Angular的基本块，多个组件将组成您的应用程序。 一个模块可以是另一个模块的库。例如，作为主要Angular库模块的angular2 / core库将由另一个组件导入。 它们可以互换吗？组件是模块吗？但是反之亦然吗？

184 angular  module  components 

我正在阅读相关问题，发现了这个问题，但是我的问题是如何从开发模式切换到生产模式。此处指出的模式之间存在一些差异。 在控制台中，我可以看到....Call enableProdMode() to enable the production mode.但是，我不确定应该在哪种类型的实例上调用该方法。 有人可以回答这个问题吗？

182 angular 

我使用的是angular 5.0.3，我想使用一堆查询参数来启动我的应用程序/app?param1=hallo&param2=123。如何从Angular 2中的url获取查询参数中给出的每个技巧？对我不起作用。 任何想法如何获取查询参数的工作？ private getQueryParameter(key: string): string { const parameters = new URLSearchParams(window.location.search); return parameters.get(key); } 这个私有函数可以帮助我获取参数，但是我认为这不是在新的Angular环境中正确的方法。 [更新：]我的主应用看起来像 @Component({...}) export class AppComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit(): void { // would like to get query parameters here... // this.route... } }

181 angular  typescript  angular-routing 

如何在Angular 2中强制组件的重新渲染？为了与Redux一起进行调试，我想强制组件重新呈现其视图，这可能吗？

180 angular  angular2-changedetection 

Angular 2路线中是否可以有一个可选的路线参数？我在RouteConfig中尝试了Angular 1.x语法，但收到以下错误： “原始例外：路径“ / user /：id？”包含“？”，这是路由配置中不允许的。” @RouteConfig([ { path: '/user/:id?', component: User, as: 'User' }])

180 javascript  angular 

我有一个WebApi / MVC应用程序，正在为其开发angular2客户端（以替换MVC）。我在了解Angular如何保存文件时遇到了一些麻烦。 请求成功（正常工作与MVC，我们可以登录接收到的数据），但我无法弄清楚如何保存下载的数据（我主要是遵循同样的逻辑这篇文章）。我敢肯定它很简单，但是到目前为止我还没有掌握它。 组件功能的代码如下。我尝试过不同的方案，则斑的方法应该是，据我了解的路要走，但没有作用createObjectURL在URL。我什至无法URL在window中找到定义，但显然它存在。如果使用FileSaver.js模块，则会出现相同的错误。所以我想这是最近更改或尚未实现的事情。如何触发文件保存在A2中？ downloadfile(type: string){ let thefile = {}; this.pservice.downloadfile(this.rundata.name, type) .subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data), error => console.log("Error downloading the file."), () => console.log('Completed file download.')); let url = window.URL.createObjectURL(thefile); window.open(url); } 为了完整起见，获取数据的服务如下，但是它唯一要做的就是发出请求并成功传递数据而不进行映射： downloadfile(runname: string, type: string){ return this.authHttp.get( this.files_api + …

180 angular  typescript  download  fileapi 

我们正在尝试在我们的公司构建自己的表单域组件。我们试图像这样包装材料设计的组件： 领域： <mat-form-field> <ng-content></ng-content> <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint> <mat-hint align="end">{{message.value.length}} / 256</mat-hint> <mat-error>This field is required</mat-error> </mat-form-field> 文本框： <field hint="hint"> <input matInput [placeholder]="placeholder" [value]="value" (change)="onChange($event)" (keydown)="onKeydown($event)" (keyup)="onKeyup($event)" (keypress)="onKeypress($event)"> </field> 用法： <textbox value="test" hint="my hint"></textbox> 结果大约是： <textbox placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer"> <field> <mat-form-field class="mat-input-container mat-form-field> <div class="mat-input-wrapper mat-form-field-wrapper"> <div class="mat-input-flex mat-form-field-flex"> <div class="mat-input-infix …

180 angular  angular-material2 

这是我的代码： import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; logIn(username: string, password: string) { const url = 'http://server.com/index.php'; const body = JSON.stringify({username: username, password: password}); const headers = new HttpHeaders(); headers.set('Content-Type', 'application/json; charset=utf-8'); this.http.post(url, body, {headers: headers}).subscribe( (data) => { console.log(data); }, (err: HttpErrorResponse) => { if (err.error instanceof Error) …

179 angular  http-headers  angular-httpclient 

我正在学习angular 2，并且这是我第一次使用angular CLI项目创建沙箱项目。 我能够运行命令“ ng serve”，效果很好。我想阻止它运行，所以我运行了“ Control Z”。 当我再次尝试运行“ ng-serve”命令时，它提示我“端口4200已在使用中”。 我运行“ PS”以获取PID列表，并杀死了angular-cli的PID，然后再次运行“ ng-serve”，仍然给出了相同的端口使用错误。

179 angular