标签: angular-components

我需要检查窗口大小,如果它是<1400 px(笔记本电脑),最好的方法是什么？

如果它小于1400,我想将变量设置为true,例如.

这是我的 Heroes.component.html：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    <h1>
        <h2>{{hero.name}} Details</h2>
        <div><span>id: </span>{{hero.id}}</div>
        <div><span>name: </span>{{hero.name}}</div>
        <app-heroes></app-heroes>
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>

这是我的 Heroes.component.ts：

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
    
@Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
    hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
    
    constructor() { } …

我在 Angular 7 中创建了一个组件库，它将被移植到其他应用程序，并且这些应用程序将能够使用这些组件。

我遇到了一个问题，其中角度库安装在组件库中，但没有与组件库捆绑在一起以供在另一个应用程序中使用，并且我最终遇到了这样的错误......

Module not found: Error: Can't resolve '@angular/material' in
 'C:\Source\MappingServices\GIT\repos\SomeFolderStructure\node_mo
dules\@myComp\components\fesm5'


ERROR in ./node_modules/@myComp/components/fesm5/components.js

我如何捆绑这样的库，以便它们与组件库一起使用，无需额外安装？

更新 Package.json 文件

{
"name": "@myComp/components",
"version": "0.0.1",
"whitelistedNonPeerDependencies": [
"agm","material", "ol"
],
"dependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0",
"@agm/core": "^1.0.0-beta.5",
"ol": "^5.3.1"
},
"peerDependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0",
"@agm/core": "^1.0.0-beta.5",
"ol": "^5.3.1"
},
"publishConfig": {
"registry": "http://someTFSdirectory"
}
}

我在这里阅读的所有内容： https: //angular.io/guide/dependency-injection-in-action使得这看起来应该是可能的，但是当尝试从另一个注入的服务上调用方法时，我收到此错误服务：

TypeError：无法在 CatchSubscriber.handleError [作为选择器] (project.service.ts:30) 处读取未定义的属性“isLoggedIn”，位于 TapSubscriber._error (tap.js:56) 处的 CatchSubscriber.error (catchError.js:29) 处TapSubscriber.error (Subscriber.js:55) 在 MapSubscriber._error (Subscriber.js:75) 在 MapSubscriber.error (Subscriber.js:55) 在 FilterSubscriber._error (Subscriber.js:75) 在 FilterSubscriber.error (Subscriber. js:55) 在 MergeMapSubscriber.notifyError (OuterSubscriber.js:7) 在 InnerSubscriber._error (InnerSubscriber.js:14)

这是我的ProjectService，正在注入我的UserService

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, throwError, of } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { AuthHeader } from '../../Shared/Helpers/AuthHeader';
import { UserService } from …