Questions tagged «angular»

尝试使用ViewChild时出现错误。错误是“未提供'opts'参数。” 两个@ViewChild都给出错误。 import { Component, OnInit, ElementRef, ViewChild, Output, EventEmitter } from '@angular/core'; import { Ingredient } from 'src/app/shared/ingredient.model'; @Component({ selector: 'app-shopping-edit', templateUrl: './shopping-edit.component.html', styleUrls: ['./shopping-edit.component.css'] }) export class ShoppingEditComponent implements OnInit { @ViewChild('nameInput') nameInputRef: ElementRef; @ViewChild('amountInput') amountInputRef: ElementRef; @Output() ingredientAdded = new EventEmitter<Ingredient>(); constructor() {} ngOnInit() { } onAddItem() …

248 angular  typescript 

我正在尝试显示一个勾号，如果答案是可接受的答案： template: `<div ngIf="answer.accepted">✔</div>` 但是我得到这个错误： EXCEPTION: No provider for TemplateRef! (NgIf ->TemplateRef) 我究竟做错了什么？

247 angular  angular2-template 

我正在尝试在Angular中实现类似委托模式的功能。当用户单击时nav-item，我想调用一个函数，该函数然后发出一个事件，而该事件又应由侦听该事件的其他某些组件处理。 这是场景：我有一个Navigation组件： import {Component, Output, EventEmitter} from 'angular2/core'; @Component({ // other properties left out for brevity events : ['navchange'], template:` <div class="nav-item" (click)="selectedNavItem(1)"></div> ` }) export class Navigation { @Output() navchange: EventEmitter<number> = new EventEmitter(); selectedNavItem(item: number) { console.log('selected nav item ' + item); this.navchange.emit(item) } } 这是观察部分： export class …

243 angular  observer-pattern  observable  eventemitter  event-delegation 

我正在尝试学习Angular 2。 我想使用@ViewChild Annotation 从父组件访问子组件。 下面是几行代码： 在BodyContent.ts中，我有： import {ViewChild, Component, Injectable} from 'angular2/core'; import {FilterTiles} from '../Components/FilterTiles/FilterTiles'; @Component({ selector: 'ico-body-content' , templateUrl: 'App/Pages/Filters/BodyContent/BodyContent.html' , directives: [FilterTiles] }) export class BodyContent { @ViewChild(FilterTiles) ft:FilterTiles; public onClickSidebar(clickedElement: string) { console.log(this.ft); var startingFilter = { title: 'cognomi', values: [ 'griffin' , 'simpson' ]} …

241 typescript  angular 

停止鼠标事件在Angular 2中传播的最简单方法是什么？我应该传递特殊$event对象并给stopPropagation()自己打电话还是有其他方法。例如，在Meteor中，我可以简单地false从事件处理程序中返回。

238 angular  dom-events  event-propagation 

我使用angular2.0.0-beta.7。将组件加载到类似路径的路径上时/path?query=value1，会将其重定向到/path。为什么要删除GET参数？如何保存参数？ 我的路由器有错误。如果我有一条主要路线 @RouteConfig([ { path: '/todos/...', name: 'TodoMain', component: TodoMainComponent } ]) 我的孩子路线像 @RouteConfig([ { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true }, { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' } ]) 那么我就无法在TodoListComponent中获取参数。我能够得到 params("/my/path;param1=value1;param2=value2") 但我要经典 query params("/my/path?param1=value1&param2=value2")

237 typescript  angular 

我们想在由angular-cli 1.0.0-beta.5（w / node v6.1.0）生成的应用中使用引导程序4（4.0.0-alpha.2）。 在使用npm获得引导程序及其依赖关系之后，我们的第一种方法是将它们添加到angular-cli-build.js： 'bootstrap/dist/**/*.min.+(js|css)', 'jquery/dist/jquery.min.+(js|map)', 'tether/dist/**/*.min.+(js|css)', 并将它们导入我们的 index.html <script src="vendor/jquery/dist/jquery.min.js"></script> <script src="vendor/tether/dist/js/tether.min.js"></script> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script> 这样做可以正常工作，ng serve但是一旦我们生成带有-prod标志的构建，所有这些依赖关系就会从dist/vendor（惊奇！）中消失。 在使用angular-cli生成的项目中，我们打算如何处理这种情况（即加载引导脚本）？ 我们有以下想法，但我们真的不知道该走哪条路... 使用CDN？但是我们宁愿提供这些文件以确保它们将可用 将依赖项复制到dist/vendor我们之后ng build -prod？但是，这似乎应该为angular-cli提供一些东西，因为它“照顾”了构建部分？ 添加jquery，bootstrap和tether，src/system-config.ts并以某种方式将它们拉入我们的捆绑包中main.ts？但是考虑到我们不会在应用程序的代码中明确使用它们，这似乎是错误的（例如，不同于moment.js或类似lodash的东西）。

234 angular  twitter-bootstrap  angular-cli  ngx-bootstrap 

我正在尝试关注https://material.angular.io/components/component/dialog上的文档，但我不明白为什么会有以下问题？ 我在组件上添加了以下内容： @Component({ selector: 'dialog-result-example-dialog', templateUrl: './dialog-result-example-dialog.html', }) export class DialogResultExampleDialog { constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {} } 在我的模块中，我添加了 import { HomeComponent,DialogResultExampleDialog } from './home/home.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent, HomeComponent, DialogResultExampleDialog ], // ... 但是我得到这个错误。 EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory …

232 angular  angular-material 

我想基于窗口调整大小事件（在加载和动态运行）执行一些任务。 目前，我的DOM如下： <div id="Harbour"> <div id="Port" (window:resize)="onResize($event)" > <router-outlet></router-outlet> </div> </div> 该事件正确触发 export class AppComponent { onResize(event) { console.log(event); } } 如何从此事件对象中检索宽度和高度？ 谢谢。

232 javascript  angular 

“ ng-bootstrap”和“ ngx-bootstrap”有什么区别？它们彼此相关吗？还是仅仅是并发实现？ 是否有人与他们一起工作过并且可以给出/说明两者的利弊？ “ ng-bootstrap”是指https://ng-bootstrap.github.io/#/home和 带有“ ngx-bootstrap”的意思是http://valor-software.com/ngx-bootstrap/。 两者都与Angular 4（而不是AngularJS！）和Bootstrap 4有关。 请注意，这不是ngx-bootstrap和ng2 bootstrap之间的区别的重复问题吗？。

231 angular  ng-bootstrap  ngx-bootstrap 

我试图将其与打字稿绑定一起使用： npm install moment --save typings install moment --ambient -- save test.ts： import {moment} from 'moment/moment'; 没有： npm install moment --save test.ts： var moment = require('moment/moment'); 但是，当我调用moment.format（）时，出现错误。应该很简单，有人可以提供行之有效的命令行/导入组合吗？

231 typescript  angular 

使用哪一个来构建模拟Web服务以测试Angular 4应用程序？

229 angular  angular-httpclient  angular2-http 

当我尝试使用data attribute我的template，就像这样： <ol class="viewer-nav"> <li *ngFor="#section of sections" data-value="{{ section.value }}"> {{ section.text }} </li> </ol> Angular 2 崩溃： 例外：模板解析错误：由于它不是已知的本机属性，因此无法绑定到“ sectionvalue”（“ ] data-sectionvalue =“ {{section.value}}”> {{section.text}} 我显然缺少语法，请帮忙。

229 angular  angular2-template 

棉绒错误消息： src / app / detail / edit / edit.component.ts [111，5]：对于（... in ...）语句，必须使用if语句进行过滤 代码段（这是一个有效的代码。也可以在angular.io表单验证部分中找到）： for (const field in this.formErrors) { // clear previous error message (if any) this.formErrors[field] = ''; const control = form.get(field); if (control && control.dirty && !control.valid) { const messages = this.validationMessages[field]; for (const key in control.errors) …

229 angular  angular2-forms  angular-cli  tslint 

我尝试使用“ ng destroy component foo”，它告诉我“ Angular-CLI不支持destroy命令” 我们如何使用Angular CLI正确删除组件？

227 angular  angular-cli