小编Smo*_*son的帖子

我刚刚使用新的Angular CLI 6.0创建了一个新的Angular项目,但我需要将Sass编译添加到我的项目中.我知道你可以在创建项目时设置一个标志,但我的项目已经创建并且已经完成了工作.

现在调用使用新Angular CLI生成的新配置文件angular.json而不是angular-cli.json.该文件的方案也有所不同,具有新属性.

在旧的angular-cli.json有一个部分,你可以这样设置stylExt,

"defaults": {
    "styleExt": "scss"
}

但是我不知道究竟要把它放在哪里,因为在"test"和"lint"属性之后,给出了一个lint错误:

Matches multiple schemas when only one must validate.

和建筑产品:

Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt).

看看CLI的文档,我没有看到任何可以指示放置位置的内容"styleExt".

我已经看到其他答案建议:ng set defaults.styleExt scss哪个抛出get/set have been deprecated in favor of the config command..

我试过ng config set defaults.styleExt scss并且npm config set …

我知道有类似的问题...但没有任何答案可以回答我的问题

我正在尝试向我的谷歌地图添加一个标记，但当我在本地运行该项目时它没有显示（在我的实时站点上它工作正常）

这是我的组件

import { React, useMemo } from "react";

import { GoogleMap, Marker, useJsApiLoader } from "@react-google-maps/api";

import MapContainerStyles from "./styles/MapContainerStyles";

const Map = () => {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: API_KEY,
  });

  const center = useMemo(() => ({ lat: -30.292038, lng: 153.118896 }), []);

  const onLoad = (marker) => {
    console.log("marker: ", marker);
  };


  const options = {
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: false,
  };

  if (!isLoaded) return <div>Loading...</div>;

  return (
      <GoogleMap zoom={15} options={options} center={center} …

我有一个在Vue中构建的项目,我想在Angular 5应用程序中重用Vue应用程序中的组件,因此我不必从头开始重建每个组件.

我在中等版本上看到了这个教程:如何在角度应用程序中使用Vue 2.0组件,但该教程适用于AngularJS.

我想知道是否有人之前已经这样做过,如果它值得,如果有人知道任何教程或参考资料.

我遇到了使用查询参数路由到路由的问题我有这样的功能

goToLink(link) {
    this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]);
}

和这个功能

sortParams(link) {
    let queryParams = url.split('?')[1];
    let params = queryParams.split('&');
    let pair = null;
    let data = {};
    params.forEach((d) => {
      pair = d.split('=');
      data[`${pair[0]}`] = pair[1];
    });
    return data;
}

好吧所以基本上发生了什么我有一个函数被调用goToLink()并且接受一个url并且传递的url是一个带有查询参数的字符串,如此...

https://website.com/page?id=37&username=jimmy

以上只是一个例子而不是它实际上看起来像它现在是一个带有查询参数的链接字符串所以会发生什么呢？我从字符串中删除params并将它们存储在sortParams()函数中的数据对象中,这样当我传递上面的字符串时在我得到一个看起来像这样的对象

{id: 37, username: 'jimmy'}

现在这就是我传递到queryParams:router.navigate中的部分,

返回对象时,该函数应如下所示

this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

所以我成功路由到所需的路线,但查询参数看起来像这样..

/page;queryParams=%5Bobject%20Object%5D

我在这里做错了什么？

任何帮助,将不胜感激!

编辑

如果我只是将功能更改为此

 this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

我得到了相同的网址 /page;queryParams=%5Bobject%20Object%5D

嗨,我不知道这是否可能...基本上我希望能够显示一个组件,但只有当路线匹配并隐藏一个组件,如果路线匹配我已经尝试这app-header-home显示当路线'/'是好的,但app-header没有显示甚至在路线时'/'我怎么能解决这个问题呢？

app.component.html

<app-header *ngIf="router.url == '/'"><app-header>
<app-header-home *ngIf="router.url != '/'"></app-header-home> //component I want hidden unless url '/'
<router-outlet></router-outlet>
<app-footer></app-footer>

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';

  constructor(
    private router: Router
  ) {

  }
}

谢谢

我有一个调用的父组件program-page,它有一个名为program-itemnow 的子组件,我有一个按钮,program-item我希望该按钮做的是调用父组件上的一个函数..我不知道我会怎么做这样的事情. .

程序page.component.html

<app-program-header></app-program-header>
<app-week-display></app-week-display>
<app-program-item [item]="programItem"></app-program-item>

程序page.component.ts

someFunction()

程序item.component.html

<button>click me</button> // button I want to be able to call event on parent component

我知道我可以使用一个事件发射器,但我以前从未使用过一个并且不确定在这种情况下我将如何实现它,我还没有看到任何一个示例,其中单击子组件上的按钮调用父项上的函数

任何帮助,将不胜感激!

我知道有一些类似的问题，例如在angular 2生产构建之后出现了如此意外的令牌，但实际上并没有回答我的问题。

基本上，我有一个角度应用程序及其PWA，现在每次我第一次访问该网站时，每次进行新的产品构建时，都会遇到类似的错误

然后刷新页面后，该站点即可正常运行。

在任何浏览器/设备上都会发生这种情况

现在我的怀疑是，每次更新应用程序时，捆绑的主要js文件都会更改，并且PWA已缓存了旧的js文件，而该应用程序仍在尝试使用新的js文件。

我的项目结构如下

我有一个根模块，可以延迟加载其他模块，而第一个加载的模块是我的帐户模块，因此用户可以登录

这是我的root-routing.module.ts

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

const routes: Routes = [
    { path: '', redirectTo: '/account/login', pathMatch: 'full' },
    {
        path: 'account',
        loadChildren: 'account/account.module#AccountModule',
        data: { preload: true }
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule],
    providers: []
})
export class RootRoutingModule {

}

因此从技术上讲，用户进入的第一个模块是帐户模块，但是显然必须从根模块重定向它。

所以我所做的是在我的根组件模块中，检查服务工作者是否需要像这样进行更新...

root.component.ts

@import { SwUpdate } from '@angular/service-worker'
... …

在我的应用程序中我试图根据我所在的页面动态更改标题组件中的标题,因此在我的标题组件中我想使用

<h1>{{title}}</h1>

我希望它根据我所在的页面进行更改.现在标题已修复,因此它位于每个页面上

下面是我试图改变的图像

基本上,如果我在主页上我希望它说回家,然后如果我在一个关于页面,我希望它改为约...

我不确定如何解决这个问题,我研究的所有内容都是更改<head></head>标签中的标题

将Angular Universal与使用动态内容的页面一起使用时,无法使SSR正常工作.所有其他页面都有效,动态页面返回HTML但不包含动态数据.

方法叫:

ngOnInit() {
  const div = this.renderer.createElement('div');
  const texttest = this.renderer.createText('this works');

  this.renderer.appendChild(div, texttest);
  this.renderer.appendChild(this.content.nativeElement, div);

  this.createLinkForCanonicalURL();

  // The HTML never shows, the method works fine.
  this._contentfulService.getBlogPosts().then(posts => {
    this.blogPosts = _.orderBy(posts, ['sys.createdAt'], ['desc']);
  });
}

服务方式

getBlogPosts(query ? : object): Promise<Entry<any>[]> {
  return this.cdaClient.getEntries(Object.assign({
      content_type: CONFIG.contentTypeIds.blogPosts
    }, {
      'fields.private': false
    }))
    .then(res => res.items);
}

模板:

这从未在源中显示.

<li class="blog-post" *ngFor="let post of blogPosts">
  <h1>{{post.fields.title}}</h1>
</li>

尝试过入门套件并且它们无法调用相同的方法.还尝试使用render2注入和解析器服务来测试在加载之前获取数据.

似乎什么都没有用？

任何帮助,将不胜感激!

编辑

这是我的server.ts文件

// These are important and needed before …

我知道有一些类似的问题，但没有人回答我的问题。

基本上，以角度操作 DOM 的正确方法是什么，说我有这个。

html

<button id="buy-now">BUY NOW</button>

当你点击按钮时，我希望按钮变成紫色，所以在纯 javascript 中你会写一些类似的东西

javascript

changeColour() {
   const b = document.getElementById('buy-now');
   b.style.backgroundColor = 'purple';
}

现在在 Angular 中我一直这样做，但最近注意到有人说这不正确？

以角度操作 DOM 的正确方法是什么，我将如何重写我的示例以反映这种更正的方式？

任何帮助，将不胜感激！

编辑

明确地说，我知道在 Angular 中我可以做到这一点

HTML

<button (click)="changeColour()" id="buy-now">BUY NOW</button>

文件

changeColour() {
   const b = <HTMLElement>document.querySelector('#buy-now');
   b.style.backgroundColour = 'purple'
}

但这是操纵 dom 的合适方法吗？

改变按钮颜色只是一个简单的例子，我的意思是对于任何类型的 DOM 操作

谢谢