Questions tagged «angular»

我无法理解ngOnInit和之间的区别ngAfterViewInit。 我发现它们之间的唯一区别是@ViewChild。根据以下代码，elementRef.nativeElement它们中的是相同的。 我们应该使用什么场景ngAfterViewInit？ @Component({ selector: 'my-child-view', template: ` <div id="my-child-view-id">{{hero}}</div> ` }) export class ChildViewComponent { @Input() hero: string = 'Jack'; } ////////////////////// @Component({ selector: 'after-view', template: ` <div id="after-view-id">-- child view begins --</div> <my-child-view [hero]="heroName"></my-child-view> <div>-- child view ends --</div>` + ` <p *ngIf="comment" class="comment"> {{comment}} </p> ` }) …

78 angular  ngoninit 

我正在从Webstorm过渡到Visual Studio Code。Webstorm的性能非常糟糕。 Visual Studio代码在查找所需的依赖项并将其导入方面不是很有帮助。到目前为止，我一直在手动执行此操作，但是老实说，我宁愿等待15秒钟以进行Webstorm查找并添加必须手动挖掘的导入。 我正在使用@ minko-gechev https://github.com/mgechev/angular2-seed的angular2种子 我的baseDir中有一个tsconfig.json，看起来像这样： { "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": false, "removeComments": true, "noLib": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "pretty": true, "allowUnreachableCode": false, "allowUnusedLabels": false, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitUseStrict": false, "noFallthroughCasesInSwitch": true }, "exclude": [ "node_modules", "dist", "typings/index.d.ts", "typings/modules", "src" …

78 typescript  angular  visual-studio-code 

当用户单击链接时，我正在尝试打开一个新页面。我不能使用Angular 2 Router，因为它没有任何功能可以重定向到外部URL。 所以，我正在使用window.location.href =“ ...”; html代码： <button (click)="onNavigate()">Google</tn-submenu-link> 打字稿代码： onNavigate(){ //this.router.navigateByUrl("https://www.google.com"); window.location.href="https://www.google.com"; } 但是，如何在新标签页中打开它？使用window.location.href时？

78 angular  typescript 

我有一个Angular 2应用程序。为了Document在测试中模拟 对象，我想将其注入到服务中，例如： import { Document } from '??' @Injectable() export class MyService { constructor(document: Document) {} } TitleAngular的服务使用内部getDOM()方法。 有没有简单的方法可以将注入Document服务？另外，如何在providers数组中引用它？

78 typescript  angular 

是否有任何不太复杂的方法来在angular 2中进行确认对话框，其想法是单击一个项目，然后显示一个弹出窗口或模态以确认其删除，我从这里尝试了angular 2 modals angular2-modal，但是如果您确认或取消它，我不知道该如何做。click函数工作正常，唯一的问题是我不太清楚如何使用它。我也有另一个具有相同插件的模态，与我使用的不同。 this.modal.open(MyComponent); 而且我不想创建另一个组件只是为了显示确认框，这就是我要问的原因。

78 angular 

在Angularjs 1中，可以通过以下方式进行排序和过滤： <ul ng-repeat="friend in friends | filter:query | orderBy: 'name' "> <li>{{friend.name}}</li> </ul> 但是我在Angularjs 2.0中找不到如何执行此操作的任何示例。我的问题是如何在Angularjs 2.0中进行排序和过滤？如果仍然不支持它，是否有人知道何时或是否将其放入Angularjs 2.0？

77 angular  typescript 

我的应用程序具有保存名称的NameService。 App有两个子组件，Navbar和TheContent引用了此服务。每当服务中的名称更改时，我都希望它在其他两个组件中进行更新。我怎样才能做到这一点？ import {Component, Injectable} from 'angular2/core' // Name Service @Injectable() class NameService { name: any; constructor() { this.name = "Jack"; } change(){ this.name = "Jane"; } } // The navbar @Component({ selector: 'navbar', template: '<div>This is the navbar, user name is {{name}}.</div>' }) export class Navbar { name: any; …

77 javascript  angular 

我有这个枚举（我正在使用TypeScript）： export enum CountryCodeEnum { France = 1, Belgium = 2 } 我想在表单中构建一个select，对于每个选项，将枚举整数值作为value，并将枚举文本作为label，如下所示： <select> <option value="1">France</option> <option value="2">Belgium</option> </select> 我怎样才能做到这一点 ？

77 typescript  angular  angular2-forms 

当我使用Angular CLI（8.0.0）生成项目时，运行ng serve，在Internet Explorer中打开应用程序，然后出现空白屏幕。 我看了看polyfills.ts文件，并取消了以下几行的注释： import 'classlist.js'; import 'web-animations-js'; 我还删除了所有core.js导入，因为Angular 8直接支持core.js 3.0。 我也跑了npm i。 package.json： "dependencies": { "@angular/animations": "~8.0.0", "@angular/common": "~8.0.0", "@angular/compiler": "~8.0.0", "@angular/core": "~8.0.0", "@angular/forms": "~8.0.0", "@angular/platform-browser": "~8.0.0", "@angular/platform-browser-dynamic": "~8.0.0", "@angular/router": "~8.0.0", "classlist.js": "^1.1.20150312", "rxjs": "~6.4.0", "tslib": "^1.9.0", "web-animations-js": "^2.3.1", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.800.0", "@angular/cli": "~8.0.0", …

77 angular  angular-cli  polyfills  angular8 

我搜索了google和angular cli文档，但找不到任何使用angular cli安装特定版本的angular的方法。可能吗？

77 angular  angular-cli 

尝试将新的formControl条目动态添加到Angular中的formGroup中。 method() { this.testForm.addControl('new', ('', Validators.required)); } 能做到吗？

77 angular  angular-reactive-forms  form-control 

在我的mat-table中，这里有6列，当任何一列没有更多的单词然后看起来像Image-1，但是当任何一列有更多单词然后UI看起来像Image-2时，那么如何设置UI就像Image-1列中的第6个角中有更多单词？ 图片1 图片2 user.component.html <div class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource"> <ng-container matColumnDef="userimage"> <th mat-header-cell *matHeaderCellDef> # </th> <td mat-cell *matCellDef="let element"> <img src="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style="height: 40px;width: 40px;"/> </td> </ng-container> <ng-container matColumnDef="username"> <th mat-header-cell *matHeaderCellDef> Full Name </th> <td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td> </ng-container> <ng-container matColumnDef="emailid"> <th mat-header-cell *matHeaderCellDef> EmailId …

77 html  css  angular  angular-material 

我正在尝试从URL获取开始日期。网址看起来像http://sitename/booking?startdate=28-08-2017 我的代码如下： aap.module.ts import {...}; @NgModule({ declarations: [ AppComponent, ModalComponent ], imports: [ BrowserModule, FormsModule, HttpModule, JsonpModule, ReactiveFormsModule, RouterModule.forRoot([{ path: '', component: AppComponent }, ]), ], providers: [ContactService, AddonService, MainService], bootstrap: [AppComponent] }) export class AppModule { } aap.component.ts import {...} import {Router, ActivatedRoute, Params} from '@angular/router'; constructor(private activatedRoute: ActivatedRoute) …

77 angular 

我有一个像这样的嵌套子组件： <app-main> <child-component /> </app-main> 我的appMain组件需要在子组件上调用一个方法。 如何在子组件上调用方法？

77 javascript  angular 

尝试更新Angular CLI和NPM时，我陷入了几乎无休止的错误循环。每次更新时，都会遇到WARN消息，告诉我安装对等依赖项（请参阅下文），但是每次安装依赖项时，都会遇到更多的WARN消息。有没有更好的方法来处理这种情况，或者它是否需要花费数小时？ npm WARN @angular/animations@5.2.1 requires a peer of @angular/core@5.2.1 but none is installed. You must install peer dependencies yourself. npm WARN @angular/compiler-cli@5.1.0 requires a peer of typescript@>=2.4.2 <2.6 but none is installed. You must install peer dependencies yourself. npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of @angular/core@^4.0.3 but none is …

77 angular  dependencies  angular-cli  npm-install