标签: angular7

我的 Angular 7 应用程序需要在 iFrame 中呈现。由于系统的特殊性，我需要防止 URL 更改，或者我应该说我需要 Angular 不要期望 URL 更改。

我找到了一些帖子，展示了如何在特定的路由调用中阻止它，但 URL 在应用程序加载时也会更新。

目标是维护 URL，如：website.com/applicition，即使路由发生变化以致于 window.location 没有更新。

https://website.com/application [每个视图都需要] https://website.com/application/home [不需要任何视图]

谢谢，韦恩

在最近的 Angular 7 项目中，我有一个组件（在文件中定义file-list.component.ts），其中有一个mat-paginator（来自 Angular 材料组件库的组件）。当我想更改 的背景颜色时mat-paginator，我首先尝试将

.mat-paginator-container {
  background-color: yellow;
}

在film-list.component.scss（与此组件关联的样式表）中，分页器的背景颜色没有改变。当我把app.component.scss它放进去时，它也不起作用。但是当我把它放在 中时src/styles.css，背景颜色正确地改变了。

所以我的问题是：

• 之间有什么区别src/styles.scss，app.component.scss和film-list.component.scss？
• 每个文件的范围是什么？
• body这些样式表文件中使用的选择器有什么影响？

我正在尝试在基于 Angular 7 的应用程序中实现面包屑。

下面提到了包含面包屑组件的根组件的 HTML 模板（面包屑在路由器出口之外）

<app-layout>
 <div>
  <app-breadcrumb></app-breadcrumb>
  <router-outlet></router-outlet>
 </div>
</app-layout>

面包屑组件 ts 文件

ngOnInit() {
 this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((router) => {
  let snapshot = this.router.routerState.snapshot;
  this.breadcrumbs = [];
  let url = snapshot.url;
  let routeData: Data = snapshot.root.data;
  let label = routeData['breadcrumb'];
  let params = snapshot.root.params;
  this.breadcrumbs.push({
    url: url,
    label: label,
    params: params
  });
});

面包屑组件 html 文件

<nav aria-label='breadcrumb'>
  <ol class='breadcrumb'>
    <li *ngFor='let breadcrumb of breadcrumbs'>
      <a [routerLink]='[breadcrumb.url, breadcrumb.params]' routerLinkActive='active'>{{ breadcrumb.label }}</a>
    </li>
  </ol>
</nav>  

路由定义如下 …

目前，我正在使用 webpack 将我的 Angular project4 升级到 Angular7。
我卡在了一步

从HttpModule和Http服务切换到HttpClientModule和HttpClient服务。HttpClient简化了默认的人体工程学（您不再需要映射到 json）并且现在支持类型化的返回值和拦截器。

关于这一步我需要更换

• HttpModule => HttpClientModule
  
• Http=> 对于从=>更新，是否有任何脚本可以帮助喜欢或我们需要手动编辑？HttpClient

HttpHttpClient
$rxjs-5-to-6-migrate -p src/tsconfig.app.json

下面是来自 login.component.ts 的代码，

login() {
const val = this.form.value;

if (val.email && val.password) {
  this.authService.login(val.email, val.password)
    .subscribe(
      data => {

        if (data && data.Token) {
          // store user details and jwt token in local storage to keep user logged in 
          //between page refreshes
          localStorage.setItem('currentUser', JSON.stringify(data));
          console.log("user logged in");
          this.router.navigate([this.returnUrl]);
        } else {
          console.log("user not logged in");
        }

      },
      error => {
        this.error = error;
      });
 }
}

下面是角度服务的代码，

login(email: string, password: string) {
 return this.http.post<User>(this.baseUrl + "Authenticate", { email, 
password …

我正在尝试在我的 Angular6 项目之一中使用动态图像路径作为背景图像。我曾尝试使用 [style.background-image] & [style.background] 甚至 encodeURI 来修复路径中的空格，也尝试使用 *ngIF 以便在加载后呈现。

情况1：

imgPath 是绝对路径，我将 JSON 数据的路径附加到该路径。

HTML代码

    <a routerLink="/article/{{news.id}}">        
      <img [style.background-image]="'url(' + imgPath + news.encodedImage.encocoded_primary_image + ')'">          
    </a>

成分

使用 encodeURI() 函数检查图像的空格和其他括号

'encocoded_primary_image': encodeURI(res['primary_image']['file_path'])

输出

文章图片对比

如图所示，“s/Absorica%20(2).png”有括号，这可能是导致错误的原因，但不确定。

其他情况

我试图用[style.background]，[ngStyle]，改变图像标签div标签。

但是我无法理解为什么很少有图像在渲染而很少有图像没有渲染，尽管路径正确生成，我已经通过在新选项卡中打开它们进行了确认。

任何帮助将不胜感激

我是 Angular 和 Docker 的新手。我开发了一个 Angular 7 应用程序并尝试对其进行 dockerize。我确实看过很多教程，并且能够构建 Docker 映像。下面是我的 Dockerfile

FROM nginx:1.13.3-alpine
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
COPY ./ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

我使用命令运行 docker 容器

docker run -d --name containerName -p 8082:80 imagename

我的容器确实启动了，在浏览器中查看http://IP-address:8082/ 后，我可以看到我的应用程序的 index html。除了我的应用程序的其他 url 像登录页面 ( http://IP-address:8082/login ) 或仪表板 ( http://IP-address:8082/dashboard ) 工作。我看到 404 页面未找到问题。还缺少什么来确保路由在我的 dockerized 容器中工作？

下面是我的 default.conf 文件

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / …

我正在尝试构建我在 angular7 中开发的 Web 应用程序的生产版本，并且编译运行良好。但是当我尝试导航到该应用程序时，会在控制台中引发错误：

Uncaught TypeError: ctor is not a constructor
    at _createClass (main.07add232d9f568bb2d7a.js:33609)
    at _createProviderInstance (main.07add232d9f568bb2d7a.js:33583)
    at initNgModule (main.07add232d9f568bb2d7a.js:33514)
    at new NgModuleRef_ (main.07add232d9f568bb2d7a.js:34243)
    at Object.createNgModuleRef (main.07add232d9f568bb2d7a.js:34232)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (main.07add232d9f568bb2d7a.js:36793)
    at main.07add232d9f568bb2d7a.js:30443
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.a8a979dc29215b620775.js:396)
    at Object.onInvoke (main.07add232d9f568bb2d7a.js:29978)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.a8a979dc29215b620775.js:395)

我该如何解决？我不明白哪个图书馆出了问题。这是我的 package.json

{
  "name": "cop-ang",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/common": "^7.1.4",
    "@angular/compiler": "^7.1.4",
    "@angular/core": …

场景： 我使用材质图标按钮创建了一个评级选项，如下所示：