任务-为Angular库创建一个可重用的button / anchor标记属性选择的组件,该行为本身的大部分逻辑都绑定在该组件本身上,而不是在HTML标记上。
HTML标记在理想情况下应尽可能整洁
<a routerLink="" attributeSelectorForComponent></a>
问题-尝试[attr.disabled]通过单击侦听器防止锚标记上出现routerLink时触发。
@HostListener('click', ['$event']) onMouseClick(event: Event) {
event.stopImmediatePropagation();
event.preventDefault()
}
Run Code Online (Sandbox Code Playgroud)
为了简化起见,从等式中删除了禁用的逻辑,无论如何,仍会触发routerLink。
建议的解决方案- 如何有条件地禁用routerLink属性?并不能真正解决我的问题,禁用指针事件只会禁用鼠标事件而不是键盘事件,并且还会阻止我删除指针事件:没有鼠标悬停,单击ect要求相对复杂的操作解决方案,以检测disable属性并相应地删除css,并且通常似乎比正确的解决方案更讲究技巧。
javascript preventdefault angular angular-router angular-routerlink
因此,当我将鼠标悬停在任何明显突出显示的功能上时,我正在尝试向其地图中添加选择交互。
import Select from 'ol/interaction/select';
import pointerMove from 'ol/events/condition.js'
this.selectPointerMove = new Select({
condition: pointerMove
});
this.coreMapComponent.map.addInteraction(this.selectPointerMove);
Run Code Online (Sandbox Code Playgroud)
条件字段抛出错误-
Type 'typeof events' is not assignable to type 'EventsConditionType'.
Type 'typeof events' provides no match for the signature '(event: MapBrowserEvent): boolean'.
Run Code Online (Sandbox Code Playgroud)
在没有条件的情况下,单击鼠标即可正常工作。
应该在Angular 6项目中使用“ @ types / ol”:“ ^ 4.6.2”提及(如果有任何意义)。
所以我通常会这样写我的http请求
服务
getData(){
return this.http.get('url')
}
Run Code Online (Sandbox Code Playgroud)
零件
getTheData() {
this.service.getData().subscribe(
(res) => {
//Do something
},
(err) => {
console.log('getData has thrown and error of', err)
})
Run Code Online (Sandbox Code Playgroud)
但是浏览Angular文档后,他们似乎在Service中将其格式化为
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
catchError(this.handleError('getHeroes', []))
);
}
Run Code Online (Sandbox Code Playgroud)
这隐含的上行空间是什么,因为它对我来说似乎很冗长,而且我个人从不需要解决错误。
所以我不是简单地尝试使用像这样的构造函数初始化一些字段来注入服务。
constructor(private wheels : number, private model : string, private automatic : boolean, private colour : string, private engine : string, private seats :number) {
this.wheels = wheels;
this.model = model;
this.automatic = automatic;
this.colour = colour;
this.engine = engine;
this.seats = seats;
}
Run Code Online (Sandbox Code Playgroud)
如果我现在创建一个新对象,然后在 console.log 中创建一个包含所有初始化值的对象,我已经在没有 this.x=x 的情况下尝试过它,但是该项目不会加载并给我这个错误消息。
ERROR Error: StaticInjectorError(AppModule)[Module1AComponent -> Number]:
StaticInjectorError(Platform: core)[Module1AComponent -> Number]:
NullInjectorError: No provider for Number!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1034)
at resolveToken (core.js:1271)
at tryResolveToken (core.js:1216)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
at resolveToken (core.js:1271)
at tryResolveToken …Run Code Online (Sandbox Code Playgroud) 我正在尝试更改swal2 错误的SweetAlert2弹出图标颜色。
我已经为它更改了节点包中的变量颜色,并将变量放在我的组件 scss 和全局 scss 文件中,并且它不会改变最糟糕的部分是如果我进入检查元素并在那里更改颜色在
.swal2-icon.swal2-error {
border-color: #f27474;
}
Run Code Online (Sandbox Code Playgroud)
它会改变但再次模仿所有相关文件中的 css 并且没有任何变化,对此的任何帮助将不胜感激。
我知道我们几乎一直都希望在应用程序中的组件之间实现松散耦合以及为什么。
但是在下面的例子中,如果有人可以澄清为什么当我们将服务作为参数传递给构造函数时它没有紧密耦合,那么我就可以理解幕后发生的逻辑。
export class Test(){
dataResults;
constructor(service: testService){
this.dataResults = service.getData()
}
}
Run Code Online (Sandbox Code Playgroud) 所以据我所知,此时此刻显然是错误的,
return arg => arg*2
Run Code Online (Sandbox Code Playgroud)
是相同的
return (arg)=>{arg*2}
Run Code Online (Sandbox Code Playgroud)
我一直认为箭头函数在语法上更简洁。
但是用像这样的闭包来做这件事是行不通的。
function addTwoDigits(firstDigit){
return (secondDigit)=>{firstDigit + secondDigit}
}
let closure = addTwoDigits(5);
console.log(closure(5)) // Undefined
Run Code Online (Sandbox Code Playgroud)
然而这很好
function addTwoDigitsV2(firstDigit){
return secondDigit => firstDigit + secondDigit
}
let closure2 = addTwoDigitsV2(10);
console.log(closure2(10))// 20
Run Code Online (Sandbox Code Playgroud) angular ×5
javascript ×3
typescript ×2
angular5 ×1
closures ×1
coupling ×1
css ×1
openlayers ×1
openlayers-3 ×1
rxjs ×1
sass ×1
sweetalert2 ×1