正如标题所说,我想在Angular 2组件中包含外部css.以下是我现在的表现:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-auth',
    templateUrl: './auth.component.html',
    styleUrls: [
        'https://fonts.googleapis.com/css?family=Dosis:400,500,600,700',
        'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css',
        './assets/css/bootstrap.min.css',
        './assets/css/main.css',
        './assets/css/responsive.css',
        './auth.component.css',
    ],
})
export class AuthComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

}

前两个网址不起作用.我收到一个错误:

ncaught Error: Cannot find module "./https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"

我可以通过将其直接包含在HTML中来使其工作,但我认为这不是正确的方法.

编辑:我甚至尝试使用encapsulation: ViewEncapsulation.None,它没有帮助.

我现在正在写两个新网站.两者都有很多功能.是否可以使用angular来编写小组件/模块并在其他应用程序中重用它们？它的项目结构是什么,或者我可以使用ng-cli的结构？

我对angular2有疑问.我正在创建一些组件,并希望有这样的东西:

这是我的DogComponent类:

@Component({
    selector: "dog",
    template: "dog.template.html"
})
class DogComponent
{
    @Input() image: string;
}

以及dog.template.html中的模板:

<div>
    <!-- Content of <top> should go here -->
    <img class="after" src="dogs/{{image}}" />
    <!-- Content of <bottom> should go here -->
</div>

当我使用DogComponent,它应该创建IMG标签与传递的SRC,但在此之前和之后的图像还可以查看其他HTML部分.

所以最后,如果我写这段代码:

<dog image="garry.png">
    <top>
        <h1>This is Garry!</h1>
    </top>
    <bottom>
        <span>He is my favorite dog!</span>
    </bottom>
</dog>

它应该呈现给:

<dog>
    <div>
        <h1>This is Garry!</h1>
        <img src="dog.png" />
        <span>He is my favorite dog!</span>
    </div>
</dog>

有人有我的问题的答案吗？

这会很棒!

编辑:

感谢您的建议,所以现在我更新了我的片段并添加了DogListComponent.如果我dog-list在应用程序的某处使用标记,则应查看最后一个片段(浏览器结果).希望它现在有点清晰了.

dog.component.ts …

我想做什么

我正在制作一个投票系统,它将在网站周围的多个组件中重复使用.为了保持其干燥,我想从任何组件创建投票组件,到指定的DOM元素..组件已被创建后,实例变量必须设置(在这种情况下model:string和pk:number,公共).

预期结果

我希望组件在指定位置呈现,打印在工厂创建组件后立即设置的正确数据.投票底部的输出应该是Model: project PK: 1

实际情况

ComponentFactory目前有两个由Component工厂创建的投票组件的输出:

1. 在正确的位置(目标div),但没有设置实例变量.

2. 在页面的底部,但这是另一个问题,在以后的时间和其他主题.

一些代码

@NgModule({
    ..
    declarations: [
        AppComponent,
        ProjectComponent, // parent for voteContainer
        VoteComponent, // Dynamic component
    ],
    entryComponents: [
        VoteComponent,
    ], ..
})

包含VoteComponent工厂的父组件

export class ProjectDetailComponent implements AfterViewInit {
    @ViewChild('voteComponentContainer', {read: ViewContainerRef}) voteComponentContainer;

    public ngAfterViewInit() {
        this.factoryVoteComponent();
    }

    private factoryVoteComponent() {
        const voteComponentFactory = this.componentFactoryResolver.resolveComponentFactory(VoteComponent);
        const voteComponentRef = this.viewContainerRef.createComponent(voteComponentFactory);
        voteComponentRef.instance.model = "project";
        voteComponentRef.instance.pk = 1;
        voteComponentRef.changeDetectorRef.detectChanges();
    }
}

动态组件目标:

<vote-component-container></vote-component-container>

基本投票组件

@Component({ …

我需要使用angular 4从父组件获取子组件DOM引用,但我无法访问子组件DOM,请指导我如何实现这一点.

parent.component.html

<child-component></child-component>

parent.component.ts

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('tableBody') tableBody: ElementRef;
  constructor(){
    console.log(this.tableBody);//undefined
  }
  ngAfterViewInit() {
       console.log(this.tableBody);//undefined
   }
}

child.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent { 
}

child.component.html

<div>
        <table border="1">
      <th>Name</th>
      <th>Age</th>
      <tbody #tableBody>
        <tr>
         <td>ABCD</td>
          <td>12</td>
        </tr>        
      </tbody>
        </table>
</div> 

使用适当的Angular Material指令,如何将方向更改为垂直？

从垂直标签开始:

然后想要放到mat-select下拉列表下面的内容:

编辑:如果有人不打扰我,我将努力使/sf/answers/3037231291/适应我的答案:)

我创建了2个功能模块(PagesSharedModule&HomeModule).
现在,我正在尝试使用组件PagesSharedModule模板内部的导出组件,HomeModule我收到此错误:

ERROR Error: Uncaught (in promise): Error: Template parse errors: 'app-main-menu' is not a known element:
1. If 'app-main-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-main-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR
->]<app-main-menu></app-main-menu>"): ng:///HomeModule/HomeComponent.html@0:0 Error: Template parse errors: 'app-main-menu' is not a known element:
1. If 'app-main-menu' is an Angular …

我使用angular 5的动态组件创建了n级嵌套展开/折叠功能.

功能上一切正常,但当我加载多个dom元素时,浏览器崩溃或滚动停止工作(Jerky Scroll)

基本上它的高级报告功能包括用户选择的过滤器和我们提供的维度.

以下是我开发的功能的工作原理

1)用户访问Web应用程序上的报告页面.2)用户选择过滤器和groupby参数,根据该参数我生成具有多行的基于div的表.

现在我保持条件检查,用户可以进一步扩展/折叠行,基于我使用group by维护的对象.这里group by表示用户可以使用的级别数

例如,按参数分组是国家,操作系统,Appname和Campaign,我将使用展开按钮为每行显示所有可用国家/地区的数据,单击展开按钮我将呈现另一个具有操作系统(OS)数据的表对于那个特定国家等等......

我实际上已经确定了为什么会出现性能问题,这可能是因为我正在检查由下一个groupby对象和isCollapsed参数标识的特定展开/折叠按钮.由于特定条件是多次定期检查滚动停止工作或浏览器开始执行缓慢

这是一段视频,说明了它的工作原理和滚动条性能

https://youtu.be/m1a2uxhoNqc

我无法在plunker或任何其他在线工具上上传代码,因为它已经集成到我正在开发的具有实际数据的平台中.

由于stackoverflow字符限制,我无法在此处添加代码,但已创建了gist.

这是访问代码的URL:

https://drive.google.com/drive/folders/1ZxAS8yHd8iHJ6ds3mZhLR0bw6o0cnRL6?usp=sharing

一旦性能问题得到解决,我想让代码更可重用.

看看这个,让我知道我的错误,以改善代码质量和性能问题.

谢谢.

当我重新加载有角度的子组件时，页面变白并且出现错误

拒绝应用来自[URL]的样式，因为它的MIME类型（'text / html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

因此，只要我通过单击更改routerLink所有内容的按钮来浏览页面即可。

更新资料

我仅production mode遇到此错误，因此在使用时ng serve可以重新加载页面，并且没有收到任何错误，并且在中Developer Tools我还可以看到中的所有文件Source tab，而当我在其中检查页面时却不是这种情况。production mode

我已经

• 变了

  <link rel="stylesheet" href="styles.9eca5df2f679ed98933c.css">
  

  Run Code Online (Sandbox Code Playgroud)

  至

  <link rel="stylesheet" type="text/css" href="styles.9eca5df2f679ed98933c.css">
  

  Run Code Online (Sandbox Code Playgroud)

• 建立我的项目跟vendorChunk=true在我angular.json

• 评论了每个相关的HTML和CSS

• 删除了我的样式表中的所有评论

• 设置encapsulation: ViewEncapsulation.None在父母和孩子身上

• 签<base href="/">入我index.html <head> tag并将其更改为<base href="./">，否则将无法正常工作

我想这里没有样式表，[URL]但我不知道为什么以及如何指定相关样式表的URL，因为styleUrls: ['./dashboard.component.css']在@Component-Decorator中，当我在production mode（--prod）中构建项目时，显然不起作用。

顺便说一下，我不使用任何外部样式表，因为这可能是我搜索此问题时发现错误的原因。

仅在具有以下路由的子组件上会发生此错误：

/<parent>/:id/<child>

导航至

this.router.navigate(['../server/' + guild.id + "/dashboard"], { relativeTo: this.route });  

在每个浏览器中

我将不胜感激

最小的Stackblitz示例

https://stackblitz.com/edit/angular-mqqvz1

在Angular 7 App中，我创建了一个带有<input>字段的简单组件。

当我使用键盘更改输入值时，我希望该值的格式设置为onBlur。-在最小的示例中，我只想向其中添加字符串“ EDIT”。

这基本上是有效的：

• 如果我输入“ test”并模糊该字段，它将更改为“ test EDIT”
• 如果我输入“ lala”并模糊该字段，它将更改为“ lala EDIT”

但是， 当我键入“测试”-模糊（有效）并再次键入“测试”时，它将不再起作用！

该onInputUpdate()功能全被调用（你可以看到它在控制台日志），变量inputValue被更新（你可以看到它的组件{{inputValue}}），但是输入值不会改变！ 我希望它是“测试编辑”，但它保持“测试”。

当我键入另一个字符串时，它可以工作，但是连续两次在同一字符串中输入却不起作用。这是为什么？我怎样才能解决这个问题？

component.html

{{inputValue}} <br />
<input type="text"
       [ngModel]="inputValue"
       (ngModelChange)="onInputUpdate($event)"
       [ngModelOptions]="{ updateOn: 'blur' }"/>

component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {

  inputValue = "teststring";

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
  ) {}

  public ngOnInit() {
    this.inputValue = "initial";
  }

  public onInputUpdate(inputValue: string) …