www.state-it.info

Gran base de respuestas a las preguntas de los desarrolladores
Header decor

¿por Qué no pasa por роуту de un único elemento?

kikosko 2018-10-29 16:46:57

He creado un diálogo con el componente: "GalleryItemComponent" donde отображаю información acerca de un elemento, cuando hago clic en el botón "edit" en el cuadro de diálogo, quiero pasar de роуту "id" deseado, me elemento en el componente de "GalleryItemComponent" donde ya voy a editar el elemento. Pero al pasar deseado me роуту, recibiendo esta aquí el error: "Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]:
StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]:
NullInjectorError: No provider for MatDialogRef!". He probado añadir "MatDialogRef" el proveedor "GalleryModule" como resultado de la conseguía un error: "Can't resolve all parameters for MatDialogRef: (?, ?, ?). unit testing patrones ". Explique por favor como ir a роуту correspondiente id del elemento.

GalleryRoutingModule:

const galleryRoutes: Routes = [
    {
        path: '',
        canActivate: [AuthGuard],
        children: [
            {path: '', component: GalleryComponent, resolve: {posts: PostsResolver}},
            {path: 'add', component: GalleryAddComponent},
            {path: ':id', component: GalleryItemComponent, resolve: {post: PostResolver}},
        ]
    },
];


PostResolver:

@Injectable({
    providedIn: 'root',
})

export class PostResolver implements Resolve<Picture> {
    constructor( private galleryService: GalleryService) {
    }
    resolve(route: ActivatedRouteSnapshot): Observable<Picture> {
        return this.galleryService.getPicture(+route.paramMap.get('id'));
    }
}


Gallery.component.ts:

export class GalleryComponent implements OnInit {
    collection: Picture[] = [];


    fileNameDialogRef: MatDialogRef<GalleryItemComponent>;

    constructor(private route: ActivatedRoute, private dialog: MatDialog) {
}
    ngOnInit() {
        this.getPictures();
    }
   getPictures() {
        this.route.data.subscribe(data => {
            data.posts.forEach(post => {
                if (post.id > 10) {
                    this.collection.unshift(post);
                } else {
                    this.collection.push(post);
                }
                this.save();
                this.getCollection();
            });
        })
    }

    openAddFileDialog(pic?) {
        this.fileNameDialogRef = this.dialog.open(GalleryItemComponent, {
            minWidth: 300,
            minHeight: 400,
            data: pic
        });
    }
}


Gallery.component.html:

<div class="row">
    <div class="col-lg-3 col-md-4 col-6" *ngFor="let pic of collection; ">
        <div class="info">
            <a [routerLink]="[pic.id]" >
                <img [src]="pic.url" alt="test" class="img-responsive">
                <p class="lead"><span>{{pic.id}}:</span>{{pic.title | truncate:'14':true}}</p>
            </a>
            </p>
        </div>
        <div class="card buttons">
            <button (click)="openAddFileDialog(pic)">Add file</button>
        </div>
    </div>
</div>


GalleryItem.component.html:

<div *ngIf="data" class="item">
        <div class="card  w-100">
            <h3 mat-dialog-title>About orc</h3>

                <img class="card-img-top" [src]="data.url" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Orc number: {{data.id}}</h5>
                    <p class="card-text"><strong>What orc says about himself:</strong> {{data.title}}</p>

                    <p class="card-text"><strong>Orc birthday:</strong> <span class="date-info" [Highlight]>{{ data.date | date: 'fullDate'}}</span>
                    </p>
                </div>
            <mat-dialog-actions>
                <button routerLink="gallery/{{data.id}}">Edit</button>
            </mat-dialog-actions>
        </div>
    </div>
</mat-dialog-content>


GalleryItem.component.ts:

export class GalleryItemComponent implements OnInit {
   pic: Picture;

    constructor( private route: ActivatedRoute,
                 private dialogRef: MatDialogRef<GalleryItemComponent>,
                 @Inject(MAT_DIALOG_DATA) private data
                ) {

    }

    ngOnInit() {
        this.showPost();
    }

    showPost(): void {
        this.route.data.subscribe(params => {
            this.pic = params.post;
        })
    }
}

Total answers: 1

Qairat 2018-10-30 09:02:26

la Transición de роутам se puede hacer así:

{ path: 'main', component: HelloComponent },
  { path: 'main/:id', component: HelloComponent },


[routerLink]="['../main', d.id]"

checa este link

y es que tienes un error, esto no se debe a роутами, allí el error en concreto con el MatDialogRef.

Preguntas relacionadas:

Footer decor

© www.state-it.info | Base of answers to questions for developers and programmers.