Question

我想使用ng2-opd-popup做一个简单的弹出窗口。我安装了它并将其包含在导入中，然后创建了该组件，但是它不起作用，我可能在设置中做错了什么，这是我所拥有的：

app.module：

import { BeautyService } from './services/beauty.service';
import {PopupModule} from 'ng2-opd-popup';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'auto', component: AutoComponent },
  { path: 'beauty', component: BeautyComponent },
  { path: 'clothes', component: ClothesComponent },
  { path: 'tech', component: TechComponent },
  { path: 'restaurants', component: RestaurantsComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    PopupModule.forRoot(),
    AngularDateTimePickerModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    ),
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    AutoComponent,
    BeautyComponent,
    ClothesComponent,
    TechComponent,
    RestaurantsComponent,
    PageNotFoundComponent,
    ClothesFilterComponent,
    LocationsComponent,
    ListItemsComponent,
    DescriptionComponent,
    ReservationsComponent,
    SelectLocationComponent,
    SelectDateComponent,
    SelectTimeComponent,
    SelectPeopleComponent,
    CompleteReservationComponent,
    ConfirmationModalComponent,
    DiscountsComponent,
    GenderComponent,
    HumanBodyComponent,
    PartnersComponent,
    ResultItemComponent,
    ResultListComponent,
    TechListComponent,
    ClothesShopsComponent,
    CountdownComponent,
    CardCheckComponent,
    NewsletterComponent,
    TechResultListComponent,
    HomeContentComponent,
    HeadingImageComponent,
    AboutScComponent,
    RequestFormComponent,
    ContainerFiltersComponent,
    RequestModalComponent
  ],
  bootstrap: [ AppComponent ],
  providers: [ Restaurants, TechService, BeautyService, HomeService ]
})
export class AppModule { }

我的弹出组件标记：

<h1>
  {{title}}
  <popup>
    Wrong Password
  </popup>
</h1>

<button (click)="ClickButton()">Login</button>

还有我的component.ts文件：

import { Component, OnInit } from '@angular/core';
import {Popup} from 'ng2-opd-popup';

@Component({
  selector: 'app-newsletter',
  templateUrl: './newsletter.component.html',
  styleUrls: ['./newsletter.component.css']
})
export class NewsletterComponent implements OnInit {

  constructor(private popup, Popup) {}

  clickButton() {
    this.popup.show()
  }

  ngOnInit() {}


}

我在做什么错，我该如何解决？

我收到此错误：

SyntaxError {__zone_symbol__error：错误：无法解析NewsletterComponent的所有参数：（？）。

Answer 1

似乎您缺少模板代码。

模板：

<popup>
     Add your custom html elements here
</popup>

Answer 2

您遇到语法错误。您的参数在构造函数中应如下所示：

private/public my_param1: MyParamType1, private/public my_param2: MyParamType2...

Angular ng2-opd-popup不起作用

2 个答案: