我在我的组件中有一个EventEmitter但我无法编译因为返回此错误:"提供的参数与调用目标的任何签名都不匹配"
我的组件:
@Output() addModel = new EventEmitter<any>();
saveModel($event, make, name) {
this.addModel.emit(make, name);
}
如果我删除其中一个参数this.addModel.emit()工作,但是,我可以传递2个参数以及如何传递给我的eventEmitter？
我也尝试过:
@Output() addModel = new EventEmitter<any,any>();
但它不起作用
我有一个翻译管道,它接受一个字符串作为键,并从字典中返回翻译的字符串.管道看起来像这样:
import {Pipe, PipeTransform} from 'angular2/core';
import {TranslateService} from './translate.service';
@Pipe({
name: 'translate',
pure: false
})
export class TranslatePipe implements PipeTransform {
constructor(private _translateService : TranslateService) {
}
transform(key: string): any {
var translatedText = this._translateService.resources[key];
if (translatedText)
return translatedText;
return key;
}
}
我在我的模板中使用管道,如下所示:
<div>{{'login_EnterNewPassword'|translate}}</div>
哪个将在我的HTML中呈现如下:
<div>Please enter a new password</div>
到现在为止还挺好!
TranslatePipe依赖于TranslateService,它包含一个名为resources的字典,其中包含当前语言的翻译.TranslateService的资源加载了对服务器的ajax http调用,如果用户选择其他语言,它可以在后台重新加载.
因为我需要我的UI在发生这种情况时更新所有文本,所以我将管道的pure属性设置为false.
一切都很完美,但事实是,管道经常被执行,因为它是不纯的.如果用户输入10个字符的密码,则每次按键和键入时都会开始更改跟踪,并且对于页面上所有不同的翻译文本,管道将被执行几次.
主要问题是:这是一件坏事吗,它对整体表现有多大的负面影响???
或者是否有另一种强制角度来重新评估所有需求的方法,例如只有当语言改变时？
用angular-cli创建了一个角度4项目.在angular-cli.json文件中导入css和js.
"styles": [
"../node_modules/materialize-css/dist/css/materialize.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/hammerjs/hammer.js",
"../node_modules/materialize-css/dist/js/materialize.js",
"../src/assets/js/init.js"
],
init.js具有以下功能
(function($) {
$(function() {
$('.slider').slider();
$('.button-collapse').sideNav();
$('.carousel').carousel();
// $('.carousel.carousel-slider').carousel({fullWidth: true});
$('.carousel').carousel({
dist: 0,
shift: 0,
padding: 20,
});
}); // end of document ready
})(jQuery);
在app.module.ts中导入MaterializeModule从'angular2-materialize'导入{MaterializeModule};
当我们第一次登陆页面或刷新时,滑块按预期工作.
问题:当我们使用router-link导航时,页面导航正确但javascript函数没有被调用.
从主页路由 <a routerLink="/blog/abc-1">Blog</a>
我试过:`blog.component.ts
import { Component, OnInit } from '@angular/core';
import { MaterializeModule } from 'angular2-materialize';
import * as $ from 'jquery';
import * as Materialize from 'materialize-css';
declare let Materialize : any;
@Component({
selector: 'app-blog',
templateUrl: …希望看到一个有效的例子.搜索了一下,似乎无法让它在本地工作.始终显示隐私条款徽标,用户必须与验证码进行互动.
这是我为加快速度而创建的一个codepen.
使用隐形reCAPTCHA
要使用不可见的reCAPTCHA,请创建一个RecaptchaVerifier对象,其size参数设置为不可见,指定提交登录表单的按钮的ID.
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
});
基本上我在init的这个视图中有什么:
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('phone-sign-in-recaptcha', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved - will proceed with submit function
console.log(response);
},
'expired-callback': function() {
// Reset reCAPTCHA?
}
});
<form name="mobile" novalidate>
<label class="item item-input">
<i class="icon placeholder-icon"></i>
<input type="tel" name="number" ng-model="$ctrl.user.mobile">
</label>
<button id="sign-in-button" ng-click="$ctrl.onSignInSubmit(user.mobile)"></button>
</form>
<div id="phone-sign-in-recaptcha"></div>
这是在提交时调用的函数:
ctrl.onSignInSubmit = …在下面的代码中，我得到的Cannot read property 'http' of undefined是未定义的。如何在 onAuthorize 函数中调用外部自定义函数。
这是我获得帮助的链接https://developer.paypal.com/demo/checkout/#/pattern/client 您的任何帮助都将是可观的。
ngAfterViewInit(): void {
const total = this.total_amount;
const selected_package = this.selected_package.name;
this.loadExternalScript('https://www.paypalobjects.com/api/checkout.js').then(() => {
paypal.Button.render({
env: 'sandbox',
client: {
production: '',
sandbox: 'XXXXXXXXXXXXXXXXXXXXXXX'
},
commit: true,
payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: total, currency: 'USD' },
description: selected_package,
}
]
}
})
},
onAuthorize: function (data, actions) {
return actions.payment.execute().then(function (payment) {
const formdata: FormData = new FormData; …我的应用程序有一个父组件和两个兄弟组件。
<feed>
<status></status>
<post></post>
</feed>
我想要实现的是，当我在基本上是文本字段的状态组件中写一些东西并提交时，我应该将该数据传递给 post 组件并调用 post 组件中的另一个函数来更新它的视图。但我不知道如何实现这一点。任何帮助将不胜感激。
我有这样的 json 响应
杰森：
{
"resultCode": 1,
"resultData": {
"Optionals": [
{
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBA",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1", …我有一张桌子，我想在其中为奇数行和偶数行提供不同的背景色。通常，您可以为此使用odd和even变量。但是，我现在在内建立表行，ng-container这样我可以有条件地在每次迭代中创建一个或多个行。在这种情况下，每次迭代都会根据变量创建1或2行。
<ng-container *ngFor="let detailof data.details; let odd = odd;">
<tr [ngClass]="{ 'k-alt': odd}">
<td>
{{ detail.number1 }}
</td>
<td>
{{ detail.number2 }}
</td>
<td>
{{ detail.number3 }}
</td>
</tr>
<tr *ngIf="detail.conditionalVariable" [ngClass]="{ 'k-alt': odd}">
<td></td>
<td>{{ detail.conditionalVariable }}</td>
<td></td>
</tr>
</ng-container>
如您所见，每次迭代都会使行被标记为不同的背景，而不是每行本身都被标记，因为*ngFor在ng-container元素中的声明了奇数变量。
ng-container与条件行一起使用时，是否可以为每一行赋予不同的背景色？
angular ×7
typescript ×2
angularjs ×1
eventemitter ×1
firebase ×1
jquery ×1
materialize ×1
ngfor ×1
paypal ×1