小编Ron*_*men的帖子

我一直在尝试构建一个响应式导航栏,并且不希望使用媒体查询,所以我打算使用*ngIF窗口大小作为标准.但我一直面临一个问题,因为我无法找到任何关于Angular 4窗口大小检测的方法或文档.我也尝试过JavaScript方法,但不支持.

我也尝试过以下方法:

constructor(platform: Platform) {
    platform.ready().then((readySource) => {
        console.log('Width: ' + platform.width());
        console.log('Height: ' + platform.height());
    });
}

...用于离子.

并且screen.availHeight,但仍然没有成功.

我已经使用自定义指令来检测角度2中元素外部的单击,但角度4中不可能相同.

[plunkr] https://plnkr.co/edit/aKcZVQ?p=info

当我尝试在angular-4中使用相同的代码时,我收到以下错误:

1. Argument of type '{ template: string; directives: typeof ClickOutside[]; }' is not assignable to parameter of type 'Component'. ==> 

    @Component({
    templateUrl: "",
    directives: [ClickOutside]
    })


2. Type 'Subscription' is not assignable to type 'Observable<MouseEvent>'. in the directive inside ngOnInit() and ngOnDestroy() 

ngOnInit() {
    this.globalClick = Observable
        .fromEvent(document, 'click')
        .delay(1)
        .do(() => {
            this.listening = true;
         }).subscribe((event:MouseEvent) => {
            this.onGlobalClick(event);
         });
}

ngOnDestroy() {
    this.globalClick.unsubscribe();
}

如果角度4中的指令声明有任何变化请告诉我,官方文档对此事没有任何帮助.

我已经部署了一个带有延迟加载的角度应用程序.该应用程序在Github.io域上托管时工作正常,但是当我使用mobaxterm在tomcat服务器上部署应用程序时出现错误.当页面重新加载或刷新时,应用程序将丢失路由状态并引发404错误.

HTTP状态404 - /查询

类型状态报告

消息/查询

description请求的资源不可用.

Apache Tomcat/7.0.72

Console-Log :: GET http://appv2.proctur.com/enquiry/addEnquiry 404(未找到)导航至http://appv2.proctur.com/enquiry/addEnquiry

如果我不刷新页面并一次性使用该应用程序就可以了,只是无法理解刷新时的问题.

PS ::这是我第一次在tomcat服务器上托管角度应用程序如果我犯了任何愚蠢的错误请告诉我.

为了更好地澄清,我添加了routing.module.ts,其中我懒惰加载模块.这被导入到app.module.ts ::

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: '/authPage', pathMatch: 'full' },
        { path: 'authPage', loadChildren: 'app/components/auth-page/auth-page.module#AuthPageModule' },
        { path: 'course', loadChildren: 'app/components/course/course.module#CourseModule' },
        { path: 'enquiry', loadChildren: 'app/components/enquiry/enquiry.module#EnquiryModule' },
        { path: 'student', loadChildren: 'app/components/students/student.module#StudentModule' },
    ])
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {
}

我一直在尝试关闭调用按钮（即窗口）之外的单击下拉菜单。使用 javascript 很容易，因为我可以简单地

  // Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.bulk-dropbtn')) {

  var dropdowns = document.getElementsByClassName("bulk-dropdown-content");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
  }
 }
}

但我猜打字稿不支持这一点，因为我在 window.onclick [ts] ';' 上收到错误 预期的。

有没有其他方法可以在不影响性能的情况下对打字稿执行 onClick 检测