标签: angular6

我有以下问题.我有一个使用Angular 6和路由系统构建的应用程序.我想创建一个包含此应用程序的Web组件,并能够将其用作不同Web应用程序的一部分.我已按照本教程操作,并根据自己的需要对其进行了修改:https://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/

结果是屏幕上没有任何渲染,现在浏览器中存在错误Error: The selector "app-root" did not match any elements.

在浏览器源文件上,我可以确认包含我的Web组件的js文件已成功加载.

这是我有的:

在app.module.ts中

@NgModule({
  declarations: [
    AppComponent,
    VideoRoomComponent,
    DashboardComponent,
    StreamComponent,
    DialogNicknameComponent,
    ChatComponent,
    DialogExtensionComponent,
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
    MatDialogModule,
    MatTooltipModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  entryComponents: [
    AppComponent,
    DialogNicknameComponent,
    DialogExtensionComponent,
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}, MyService],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(AppComponent, { injector: this.injector }); …

我正在使用mat对话框,该对话框在ap-fullcalendar上单击事件时执行.我正在使用Angular6.

单击某个事件时,会出现以下对话框,没有任何信息.

一旦我按下"购买"按钮,它就会转到实际的对话框.

注意:按钮似乎没有按预期工作,但是,我认为这取决于我原来的问题.此外,当我双击我的事件时,我会在第一个屏幕截图所示的对话框打开时获得不同的行为.当我按或取消时,它会关闭.

任何帮助表示赞赏!

我的主要组成部分TS:

import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { CalendarComponent } from 'ap-angular2-fullcalendar/src/calendar/calendar';
import { CalendarService } from '../_services/calendar.service';
import { DialogComponentComponent } from './dialog-component/dialog-component.component';

export interface DialogData {
  animal: string;
  name: string;
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent{

  calendarOptions: any;
  displayEvent: any;
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
  animal: string;
  name: string;
  subjectFilter: string;

  constructor(protected calendarService: CalendarService, private dialog: MatDialog) …

我正在尝试使用map来自RxJS的运算符,但它会抛出一个错误说

"Observable"类型中不存在属性"map".

这是代码:

    import { Injectable } from "@angular/core";
    import { Http } from "@angular/http";
    import "rxjs/add/operator/map";
    @Injectable()

    export class DataService {
     constructor(public http: Http) {}

     getData() {
       return this.http
        .get("https://jsonplaceholder.typicode.com/users")
        .map(res => res.json());
      }
    }

我是Angular-6的初学者，我创建了项目，然后在Create Account页面中遇到了一个小问题，并Sign in page显示了应用标题和应用页脚。但我不想在应用程序页眉和应用程序页脚上显示该页面，我想知道如何正确显示该页面apirequest page。

那是我的代码部分

app-routes.ts

export const Approutes: Routes = [
      {path: '', redirectTo: '/signup', pathMatch: 'full'},
      {path: 'home', component: HomeComponent},
      {path: 'signup', component: SignupComponent},
      {path: 'signin', component: SigninComponent},
      {path: 'forgotpassword', component: ForgotpasswordComponent},
      {path: 'apirequest', component: ApirequestComponent},
];

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

谢谢

我面临此错误，当我使用angularjs在IIS中发布我的应用程序时，请帮助我，请帮助我如何使用.net core 2.1和angularjs解决此错误。在Visual Studio正常工作中，我在IIS中遇到此错误

  services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });
            });


app.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });

错误截图：

我有一个基本的组件类，在ngOnInit内它订阅了服务调用

ngOnInit() {
    this.activityService.getActivities().subscribe(activities => {
        console.log('inside sub');
        this.recentActivities = activities;
    });
}

因此，我包含了这个console.log，以查看此订阅是否曾经执行过。

在我的测试中，我监视此活动服务方法以返回我需要的数据的可观察集合。然后在测试中，我完成了整个fixture.detectChanges（）处理，并期望我的数组长度为1。

fit('should populate recent activities', () => {
    const activities = [new ActivityBuilder()
        .withId('1').withRecentActivityActionId(RecentActivityActionType.Created).build()
    ];
    spyOn(activityService, 'getActivities').and.returnValue(of(activities));

    fixture.detectChanges();
    fixture.whenStable().then(() => {
        fixture.detectChanges();
    });
    fixture.detectChanges();

    expect(component.recentActivities.length).toBe(1);
});

根据Angular文档，他们几乎做同样的事情，我什至尝试了fakeAsync方法，但无济于事。我在这里想念什么？为什么订阅块不执行？

我有2类过滤器：group和name。我如何修改此代码，因为它们不能作为管道工作，它们是独立的，并且name过滤器覆盖group过滤器并向后覆盖。

.ts

 changeGroup(event) {
   const group = event.target.value;
   const index = this.groupValue.indexOf(group);

   if (index > -1) {
     this.groupValue.splice(index, 1);
   } else {
     this.groupValue.push(group);
   }

   this.transform(this.usersList, 'group', this.groupValue)

   if (this.groupValue.length == 0) {
     this.transform(this.usersList, '', this.groupValue)
   }
 }

 changeUser(event) {
   const user = event.target.value;
   const index = this.userValue.indexOf(user);

   if (index > -1) {
     this.userValue.splice(index, 1);
   } else {
     this.userValue.push(user);
   }

   this.transform(this.usersList, 'name', this.userValue)

   if (this.userValue.length == 0) {
     this.transform(this.usersList, '', this.userValue)
   }
 } …

我正在Component使用其他两个组件进行单元测试。单击按钮时创建其他组件

.html

    <div id="homepage-top-div" class="homepage-component-css-grid-container">  ...
        <button id="get-question-list-button" [routerLink]="questionListRouterLink" class="btn content-div__button--blue css-grid-item-button-div btn-sm">See Questions</button>
      </div>
      <div id="practice-component-top-div" class="css-grid-container-div common-styles-div--white"> <!-- 4 rows, 1 column-->
...
        <button id="new-question-button" [routerLink]="newQuestionRouterLink"  class="btn content-div__button--blue css-grid-item-button-div btn-sm">Create a Question</button>
      </div>
    </div>

.ts

export class HomepageContentComponentComponent implements OnInit {

  public questionListRouterLink="/practice-question-list";
  public newQuestionRouterLink="/new-practice-question";


  constructor() {

  }

  ngOnInit() {
  }

}

我创建了一个规范，但是运行它时出现以下错误- Error: StaticInjectorError[Location]: NullInjectorError: No provider for Location!

规格是

import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import { HomepageContentComponentComponent } from './homepage-content-component.component';
import …

您好，我是角度为6的新手，我遇到了有关身份验证的问题，即无法从没有登录的任何页面中提取用户，我面临的问题是

类“ NeedAuthGuard”错误地实现了类“ CanActivate”。您是否要扩展“ CanActivate”并将其成员作为子类继承？类型“ NeedAuthGuard”缺少类型“ CanActivate”的以下属性：路径，路由[2720]

这是我的代码

           import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient, HttpRequest } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { LoginComponent } from '../Component/login/login.component';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({
  providedIn: 'root'
})//NeedAuthGuard
export class ServiceTService {
  constructor(
    private http: HttpClient
  ) {
  }
  users: any = { 
    id: String,
    Email:String,
    Password: Number …

在npm run build时间显示的错误

    Parser Error: Binding expression cannot contain chained expression at the end of the expression [getImageUrl(image, true);] in E:/Work/JamesJ/Pixie/pixie-image-editor/source/src/app/image-editor-ui/panels/open-sample-image-panel/open-sample-image-panel.component.html@34:9 ("

<div class="samples" *ngIf="sampleImages" >
    <img [ERROR ->][src]="getImageUrl(image, true);" *ngFor="let image of sampleImages" (click)="openSampleImage(image)"")
: Parser Error: Binding expression cannot contain chained expression at the end of the expression [getImageUrl(image, true);] in E:/Work/JamesJ/Pixie/pixie-image-editor/source/src/app/image-editor-ui/panels/open-sample-image-panel/open-sample-image-panel.component.html@34:9 ("

<div class="samples" *ngIf="sampleImages" >
    <img [src]="getImageUrl(image, true);" [ERROR ->]*ngFor="let image of sampleImages" (click)="openSampleImage(image)">
</div>")
: Parser Error: Binding expression cannot contain chained expression at the …