小编tan*_*may的帖子
如果'<selector>'是Angular组件,则验证它是否是此模块的一部分
我是Angular2的新手.我试图创建一个组件,但显示错误.
这是app.component.ts文件.
import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';
@Component({
selector: 'my-app',
template: `
<h1>Hello {{name}}</h1>
<h4>Something</h4>
<my-component></my-component>
`,
directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }
这是我想要创建的组件.
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<p>This is my article</p>
`
})
export class MyComponentComponent {
}
显示两个错误:
- 如果
my-component是Angular组件,则验证它是否为此模块的一部分. - 如果
my-component是一个Web组件,然后添加CUSTOM_ELEMENTS_SCHEMA到@NgModule.schemas该组件来抑制此消息.
请帮忙.
推荐指数
解决办法
查看次数
Angular 4 @Input 属性更新不影响 UI
有 2 个组件：parentComponent 和 ChildComponent，它们定义在父级内部。在 parentComponent 中有一个局部变量，它用作传递给 ChildComponent 的输入属性的值（使用 getter）。
父组件.ts：
@Component({
selector:'parent-component',
template:`
<h1>parent component</h1>
<child-component [personData]="PersonData"></child-component>
`
})
export class ParentComponent{
personData:Person;
get PersonData():Person{
return this.personData;
}
set PersonData(person:Person){
this.personData = person;
}
ngOnInit(){
this.PersonData = new Person();
this.PersonData.firstName = "David";
}
//more code here...
}
ChildComponent.ts：
@Component({
selector:'child-component',
template:`
<h1>child component</h1>
<div *ngIf="personData">{{personData.firstName}}</div>
`
})
export class ChildComponent{
@Input() personData:Person;
//more code here...
}
问题是：在父组件的某个地方，当特定事件发生时，会调用一个函数newPersonArrived(newPerson:PersonData)，函数代码如下：
newPersonArrived(newPerson:Person){
this.PersonData = newPerson;
}
这不会影响具有新人名的 UI！
只有以下有帮助：
newPersonArrived(newPerson:Person){
this.PersonData = new …推荐指数
解决办法
查看次数
如果我包含标题,CSS/JS将无法工作
这是我的index.html档案
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>
如果我复制粘贴header.html身体后面的页面内容,那么一切正常.
当我尝试header.html使用.load()函数包含页面时,CSS将无法正常工作.
这是在线示例代码集,
如果我包含div="inc"来自外部文件的内容,则header.html下拉菜单将相互重叠.
推荐指数
解决办法
查看次数
使用Jasmine测试从viewChild调用另一个方法的方法
我有这个方法来验证组件,它正在调用另一个组件,就是它ViewChild.我正在this.ViewChildComponent.someMethod();尝试测试的组件中使用组件.我试着用spyOn(viewChildComponent, 'someMethod').and.returnValue(true).但它说this.ViewChildComponent.someMethod() is undefined.我有所有的依赖项,例如提供ViewChildComponent者的服务.我甚至前进了一步,并致电viewChildComponent其服务决定someMethod();
任何帮助都是极好的.
推荐指数
解决办法
查看次数
Angular js - 使用正确的空格在Modal中格式化String
我有一个弹出窗口,其输出如下!输出只是一个包含空格和换行符的完整字符串.但是每一行都连接到前一行.因此,每条线都可以单独调整.
Test1 : Success : 200
Test2 : Success : 200
Test3 : Success : 200
Test4 : Success : 200
Test5 : Success : 404
Test6 : Success : 401
因为我有多个这样的弹出窗口和每个弹出窗口的多个测试.有没有办法可以格式化字符串以获得适当的缩进？那就是我希望我的输出是:
Test1 : Success : 200
Test2 : Success : 200
Test3 : Success : 200
Test4 : Success : 200
Test5 : Success : 404
Test6 : Success : 401
推荐指数
解决办法
查看次数
Typescript：当类中存在函数时，无法使用对象文字实例化对象
我刚刚开始使用 Angular 2 和 Typescript，最近遇到了一些我觉得很奇怪的行为。
我的班级是这样的：
export class Person{
id: number;
name: string;
height: number;
weight: number;
calculateBmi() {
return (weight/(height*height));
}
}
当使用对象文字实例化一个新人时，如下所示：
person: Person = {
id: 1,
name: "Jack Johnson",
height: 180,
weight: 70
};
我在 Visual Studio 2017 中收到（设计时）错误：
类型“{id：number，name：string，height：number，weight：number}”不可分配给类型“Person”类型“{id：number，name：string，height：number，重量：数量}'
它还指出，它
无法将类型“{id：number，name：string，height：number，weight：number}”转换为类型“Person”：类型“Person”具有非可选属性“calculateBmi”，该属性在类型“{id:”中不存在数字，名称：字符串，高度：数字，重量：数字}'。
因此，转译器似乎将“calculateBmi”视为属性，而不是函数。解决方法当然是添加一个构造函数并使用它来实例化该类，但我想了解是否有任何方法可以解决这个问题，以便我仍然可以使用对象文字？
谢谢乔恩
顺便说一句：我正在使用 Resharper 2017.x，但我不认为这是导致出现错误消息的原因。
推荐指数
解决办法
查看次数
Angular 2双向绑定[禁用]
我有一个输入，[disabled]取决于ngModel另一个输入。最初[disabled]运行正常，但是当我们更改从属输入值时，该[disabled]属性无法运行。如何在[disabled]属性上应用两个绑定？
以下是代码段。
<select [ngModel]="isDisabled" (ngModelChange)="isDisabled=$event">
<option value="0">Disabled</option>
<option value="0">Enabled</option>
</select>
该模型isDisabled已正确更改。我可以在template中看到这样的值变化{{isDisabled}}。但未反映在[disabled]选择框的属性中。
<select [ngModel]="userInput" [disabled]="isDisabled">
<option value="test">Test</option>
</select>
推荐指数
解决办法
查看次数
在表单提交Angular 2之后,ng-2 datepicker [(ngModel)]值未更新
你好目前我在角度2使用ng-2 datepicker 1.8.3版本
<ng2-datepicker [options]="InvoicedDateOption" formControlName="invoiceDate" [(ngModel)]="InvoiceDatepickerValue" ></ng2-datepicker>
当我最初使用datepicker选项绑定datepicker时,它可以工作并绑定ngModel值,但是当提交表单时,ngModel值就消失了.
我以前绑定的选项.
this.InvoicedDateOption = new DatePickerOptions({ autoApply: true, initialDate: new Date(), format: "MM-DD-YYYY" });
最初的HTML如下所示
但是在提交表单后,ng-reflect-model消失了,并且ngModel的值没有更新.见下图.
我不知道在表单提交后我再次对ng2-datepicker应用相同的选项它不绑定到ngModel.
我搜索了许多选项但没有任何工作.但它仍然无法正常工作.
请帮忙!
angular2-forms angular2-directives angular2-template ng2-datepicker angular
推荐指数
解决办法
查看次数
在angularjs中捕获浏览器控制台错误并在弹出窗口中显示它们
我已将jade转换为html,并使用jade.js在我的AngularJS应用程序的弹出窗口中显示预览.玉可以在textarea中编辑,我也有一个预览按钮.
问题是当用户在jade控制台中发现某些错误时,会显示正确的消息和行号.
我想在弹出窗口中而不是在控制台中显示此错误.
我在控制器中尝试了类似下面的东西,但它似乎不起作用:
$scope.emailShowPreview = function() {
$scope.locals = $scope.variables_for_email_preview;
window.onerror = function myErrorHandler(err, url, line) {
alert("Error", err);
return false; // so you still log errors into console
}
try {
var jadeFunc = jade.compile($scope.editFileds.body);
} catch {
window.onerror();
}
// compile jade template to html
// console error happens below
$scope.templateFunc = jade.compile($scope.editFileds.body);
$scope.compiledHtml = $scope.templateFunc($scope.locals);
var modalInstance = $modal.open({
scope: $scope,
templateUrl: '../../views/email-preview-popup.html',
backdrop: 'static',
});
$scope.close = function() {
modalInstance.dismiss('cancel');
};
};
我在下面的页面中提到过但有点困惑: -
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
推荐指数
解决办法
查看次数
Angular Js:有条件地如何禁用所有按钮和链接？
我在控制器中有一个条件.如果条件返回true,那么我必须禁用所有链接和ng-clicks
我们该怎么办: -
Controller : $scope.disableActions = true;
在HTML中
<button type="button" ng-click="ignoreAndRedisplay()" ng-disabled="disableActions">OpenClick</button>
所以通过这样做,我必须在任何地方写ng-disabled="disableActions",这将是多余的,我们如何改善这个n按钮和链接的数量？
推荐指数
解决办法
查看次数
标签 统计
angular ×6
javascript ×6
angularjs ×3
html ×2
console.log ×1
css ×1
include ×1
jasmine ×1
jquery ×1
ngonchanges ×1
typescript ×1