标签: angular

p-dialog onHide不在角度2组件中工作 - primeng

我在角度2应用程序中使用primeng并面临此问题(stackoverflow问题)

虽然在接受的答案中提供的plunkr有效但在我的场景中没有.我有一个单独的组件,它根据父组件的输入加载.我希望在子组件关闭/隐藏时切换可见性标志.

这是代码片段

 <p-dialog header="Assets Management" [(visible)]="showDialog" modal="modal" [closable]="true" (onHide)="close()" appendTo="body">
          .. some content ..
  </p-dialog>
Run Code Online (Sandbox Code Playgroud)

在组件中,我有:

@Component({
    selector: 'view-car-colors',
    templateUrl: '/view-car-colors.html',
    inputs: ['showDialog'],
    outputs: ["onCloseDialog"],
})
export class ViewCarColorsComponent {
    private showDialog: boolean = false;    //default close
    private onCloseDialog: EventEmitter<any> = new EventEmitter();

    public close(): void {
        this.showDialog = false;
        //emit this to its parent
        this.onCloseDialog.emit({ hasChanges: true });
    }
}
Run Code Online (Sandbox Code Playgroud)

最后在我的父组件中,我称之为:

<view-car-colors [showDialog]="showCarColorsDialog" (onCloseDialog)="onCarColorsCloseDialog($event)"></view-car-colors>
Run Code Online (Sandbox Code Playgroud)

showCarColorsDialog基于点击一个按钮改变.

private onCarColorsCloseDialog($event: any): void {
    this.showCarColorsDialog = false;
    if ($event.hasChanges) …
Run Code Online (Sandbox Code Playgroud)

angular2-template primeng angular

7
推荐指数
1
解决办法
9903
查看次数

Angular2如何在保持路线的同时显示错误页面

如果这是在其他地方,请道歉,但我的正常搜索策略让我失望.

当我从API收到500时,我想显示自定义错误页面.我正在使用restangular并有一个响应拦截器,当我收到500时,它会重定向到错误页面,使用:

this.router.navigate(['/error']);

这一切都有效.但是,我想在浏览器导航栏中保留以前的URL,以便在用户刷新时再次尝试上一页,而现在他们必须重新导航到损坏的页面再试一次.

谢谢!

angular2-routing angular

7
推荐指数
1
解决办法
1074
查看次数

Angular 2 - Firebase在页面刷新时保持登录状态

所以我真的很接近这个问题.基本上,我有登录工作,我有代码设置来监视onAuthStateChanged,但问题是,当我刷新页面,即使用户当前登录,它仍然重定向到/login页面,因为我有auth警卫设置,检查用户是否已登录.

我有一个auth服务设置,可以进行所有身份验证检查.

在我的auth服务构造函数中,这就是我onAuthStateChanged设置代码的地方:

constructor(
    private auth: AngularFireAuth,
    private router:Router,
    private db:AngularFireDatabase,
  ) {

    firebase.auth().onAuthStateChanged(function(user) {
     if (user) {
       // What do I need to put here to ensure that the auth guard goes to the intended route?
     }
    });

  }
Run Code Online (Sandbox Code Playgroud)

这是我的auth guard的canActivate()方法:

 canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean> {

      if(this.authService.getAuthenticated()) {
        return Observable.of(true);
      } else {
        this.router.navigate(['/login']);
      }
    }
Run Code Online (Sandbox Code Playgroud)

这是getAuthenticated()方法:

getAuthenticated() {
    return firebase.auth().currentUser;
  }
Run Code Online (Sandbox Code Playgroud)

更新:

以下是用户实际登录时调用的方法.在实际组件中,这是登录方法:

login(data, isValid) {
    if(isValid) {

      this.authService.login(data.email, data.password)
          .then(
              (data) …
Run Code Online (Sandbox Code Playgroud)

javascript firebase angularfire firebase-authentication angular

7
推荐指数
1
解决办法
3595
查看次数

Angular 4 routing - redirectTo with skipLocationChange

我有一些路由模块,其主路径设置为: /canvas

const canvasRoutes: Routes = [
    {
        path: "canvas", component: CanvasComponent
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(canvasRoutes)
    ],
    exports: [
        RouterModule
    ],
    declarations: [],
    providers: []
})
export class CanvasRoutingModule {
}
Run Code Online (Sandbox Code Playgroud)

在应用程序路由模块中,我希望/canvas每次访问根路径时都将重定向路径设置为.目前配置如下:

const appRoutes: Routes = [
    {
        path: "", redirectTo: "/canvas", pathMatch: "full"
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ],
    declarations: [],
    providers: []
})
export class AppRoutingModule {

}
Run Code Online (Sandbox Code Playgroud)

它正常工作,并http://localhost:4201正在被重定向到http://localhost:4201/canvas.

但是,我不希望/canvas在重定向后将路径附加到URL.怎么能实现这一目标?有没有例如一种方法,我可以将skipLocationChange参数应用于此重定向,因为我正在使用它router.navigate(... …

routing angular

7
推荐指数
2
解决办法
2万
查看次数

所需的请求部分'文件'不存在 - Angular2 Post请求

我试图使用Angular2和SpringBoot完成我的文件上传功能.我可以证明我的文件上传的java代码工作正常,因为我已经使用Postman成功测试了它.

但是,当从Angular2前端发送文件时,我收到HTTP 400响应说Required request part 'file' is not present.

这是我从Angular2发送POST请求的方式.

savePhoto(photoToSave: File) {

    let formData: FormData = new FormData();
    formData.append('file', photoToSave);

    // this will be used to add headers to the requests conditionally later using Custom Request Options
    this._globals.setRequestFrom("save-photo");


    let savedPath = this._http
        .post(this._endpointUrl + "save-photo", formData)
        .map(
        res => {
            return res.json();
        }
        )
        .catch(handleError);

    return savedPath;

}
Run Code Online (Sandbox Code Playgroud)

请注意,我编写了一个CustomRequestOptions扩展的类,BaseRequestOptions以便附加Authorization标头和Content Type标头.内容类型标题将有条件地添加.

以下是代码.

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
    constructor(private _globals: Globals) {
        super(); …
Run Code Online (Sandbox Code Playgroud)

spring file-upload http spring-boot angular

7
推荐指数
1
解决办法
2927
查看次数

在Angular 4中,如何在重定向的路由中保留查询参数?

我有这个路由重定向app-routing.module.ts:

{ path: '', redirectTo: '/home', pathMatch: 'full' }
Run Code Online (Sandbox Code Playgroud)

假设我有index.html<base href="/mysite"><head>和站点被访问URL用example.com/mysite?kiosk=true.

如何kiosk=true通过上面的重定向保留查询参数?

我可以使用此代码获取查询参数app.component.ts,但当上面的路由重定向被注释掉时:

ngOnInit(): void {
    this.route.queryParams.first().subscribe((params: Params) => {
        console.log(params);
    });
}
Run Code Online (Sandbox Code Playgroud)

如何让它与上面的重定向一起使用NOT注释掉?是否有一种简单的方法可以全局设置"始终保留查询参数",或者我是否必须在内部app.component.js进行查询参数,然后仅在路径为空时重定向到"/ home"?

angular

7
推荐指数
1
解决办法
1622
查看次数

如何使用我的离子2应用程序打开Android手机的安全设置?

我正在使用Ionic 2和secureStorage插件.问题是,对于Android,必须使用代码保护设备以使用安全存储.

在它的文档中:

var ss;
var _init = function () {
    ss = new cordova.plugins.SecureStorage(
        function () {
            console.log('OK');
        },
        function () {
            navigator.notification.alert(
                'Please enable the screen lock on your device. This app cannot operate securely without it.',
                function () {
                    ss.secureDevice(
                        function () {
                            _init();
                        },
                        function () {
                            _init();
                        }
                    );
                },
                'Screen lock is disabled'
            );
        },
        'my_app');
};
_init();
Run Code Online (Sandbox Code Playgroud)

但我不是使用离子1而是离子2.如何调用secureDevice方法?

我做了类似的事情:

this.secureStorage.create('myStorage')
                .then((storage: SecureStorageObject) => {
                    storage.set('var', 'toto')
                        .then(
                        () => console.log('ok),
                        (e) => console.log('error'); …
Run Code Online (Sandbox Code Playgroud)

ionic-framework ionic2 angular

7
推荐指数
1
解决办法
733
查看次数

每个表行的反应表单

我正在使用Angular 2,我想分别验证每行中的控件.但我没有办法做到这一点.我希望它只使用反应形式而不是使用模板驱动的方法.我想要每个都有[formGroup] <tr>.任何帮助将不胜感激.以下是我的代码结构:

<tbody *ngFor="let single of allTeamDetails"                
       [ngClass]="{'alternate-row-color': $even}">
  <tr>
    <td class="td-data first-column">
      <input type="text" class="input-text form-control" 
             [value]="single.first_name">
    </td>
    <td class="td-data second-column">
      <input type="text" class="input-text form-control" 
             [value]="single.last_name">
    </td>
    <td class="td-data third-column">
      <input type="email" class="input-text form-control" 
             [value]="single.email">
    </td>
    <td class="td-data fourth-column">
      <select class="selection-dropdown width-80-percent" 
              [value]="single.user_role">
        <option *ngFor="let singleRole of allUserRole"      
                value="{{singleRole.name}}"> 
                {{setUserRoleAndType(singleRole.name)}}</option>
      </select>
    </td>
    <td class="td-data fifth-column" >
      <input type="password" class="input-text form-control">
    </td>
    <td class="td-data sixth-column" >
      <input type="password" class="input-text form-control">
    </td>
    <td class="td-data save-send-tm-data">
      <button class="btn save-user-details save-sub-account-details" …
Run Code Online (Sandbox Code Playgroud)

angular angular-reactive-forms

7
推荐指数
1
解决办法
1万
查看次数

Angular-Cli:如何忽略类名被缩小

对于应用程序,我们需要使类名保持最小,因为我们使用

var className = myObject.constructor.name;
export class myObject{ ... }
Run Code Online (Sandbox Code Playgroud)

当我们跑步

ng build-专业

类名会以随机名称最小化。

bundling-and-minification typescript angular-cli angular

7
推荐指数
4
解决办法
3316
查看次数

如何在Ionic 2项目上运行声纳扫描仪

我们已经将我们的前端项目迁移ionic/es6/angular到了ionic2/typescript/angular2.一切都很好,除了我们不知道如何运行声纳报告项目.

以前我们使用gulp和run gulp sonar命令生成声纳报告(在本地声纳服务器上).

我们不会在新的ionic2项目中使用gulp,并想知道如何在新项目中运行声纳扫描仪.

注意

  1. 我们在声纳服务器上安装了typescript插件.
  2. 我们sonar-project.properties在项目rood目录中添加了文件

问题是如何运行它

谢谢...

typescript sonarqube ionic2 sonarqube-scan angular

7
推荐指数
1
解决办法
2237
查看次数